第一百四十八节,封装库--JavaScript,菜单切换
第一百四十八节,封装库--JavaScript,菜单切换
首先在封装库封装点击切换方法
/** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环执行方法里的函数
* 参数是点击后要执行的函数,可以是多个函数,点击一次循环执行一个函数,从第一个开始,循环完毕后再次循环从第一个开始
**/
feng_zhuang_ku.prototype.dian_ji_qie_huan = function () {
for (var i = 0; i < this.jie_dian.length; i++) {
(function (jiedian, args) {
var count = 0; //计数器
addEvent(jiedian, 'click', function () { //给对象添加点击事件
args[count++ % args.length].call(this); //点击后计数器数值求于作为下标执行传入的函数,计数器在累加,将对象传入
});
})(this.jie_dian[i], arguments); //通过arguments接收传入方法的函数
}
return this;
};
菜单切换效果图
html
<div id="sidebar">
<h2>教育博文1</h2>
<ul>
<li><a href="###">靠自己95 后女生被16 所国外名校录取</a></li>
<li><a href="###">00 后的成长烦恼:压力巨大成隐形杀手</a></li>
<li><a href="###">一年自学MIT 的33 门课? 疯狂学习方法</a></li>
<li><a href="###">申请赴美读研人数下降5% 7 年来首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
</ul>
<h2>教育博文2</h2>
<ul>
<li><a href="###">靠自己95 后女生被16 所国外名校录取</a></li>
<li><a href="###">00 后的成长烦恼:压力巨大成隐形杀手</a></li>
<li><a href="###">一年自学MIT 的33 门课? 疯狂学习方法</a></li>
<li><a href="###">申请赴美读研人数下降5% 7 年来首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
</ul>
<h2>教育博文3</h2>
<ul>
<li><a href="###">靠自己95 后女生被16 所国外名校录取</a></li>
<li><a href="###">00 后的成长烦恼:压力巨大成隐形杀手</a></li>
<li><a href="###">一年自学MIT 的33 门课? 疯狂学习方法</a></li>
<li><a href="###">申请赴美读研人数下降5% 7 年来首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
</ul>
</div>
css
/*左边列表*/
#sidebar {
width:250px;
height:500px;
float:left;
}
#sidebar h2 {
width:248px;
height:30px;
line-height:30px;
font-size:14px;
background:url(img/side_h.png);
text-indent:10px;
border:1px solid #ccc;
border-bottom:none;
margin:0;
}
#sidebar ul {
height:150px;
border:1px solid #ccc;
margin:0 0 10px 0;
overflow:hidden;
opacity:1;
filter:alpha(opacity=100);
}
#sidebar ul li {
height:30px;
line-height:30px;
background:url(img/arrow4.gif) no-repeat 12px 45%;
text-indent:30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#sidebar ul li a {
text-decoration:none;
color:#333;
}
前台js
// 左侧列表
$('#sidebar h2').dian_ji_qie_huan(function () {
$(this).xia_jd().yi_dong_tou_ming({
t : 50,
step : 10,
mul:{
h:0,
o:0
}
});
},function () {
$(this).xia_jd().yi_dong_tou_ming({
t : 50,
step : 10,
mul:{
h:150,
o:100
}
});
})
首先引入封装库
第一百四十八节,封装库--JavaScript,菜单切换的更多相关文章
- 第一百四十六节,JavaScript,百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
- 第一百四十五节,JavaScript,同步动画
JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...
- 第一百四十四节,JavaScript,列队动画
JavaScript,列队动画 将上一节的,移动透明动画,修改成可以支持列队,也就是可以给这个动画方法多个动画任务,让它完成一个动画任务后,在执行第二个动画任务 原理: 就是在原有的动画方法里加一个回 ...
- 第一百五十八节,封装库--JavaScript,ajax说明
封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...
- 第一百四十九节,封装库--JavaScript,表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- 第一百五十五节,封装库--JavaScript,轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十节,封装库--JavaScript,表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百六十节,封装库--JavaScript,ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
随机推荐
- SQL语句详细汇总[转]
经典SQL语句大全 一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql serv ...
- SDL 学习及相关API
SDL_PeepEvents() 在事件队列中搜索特定类型的事件. int SDL_PeepEvents(SDL_Event *events, int numevents, SDL_eventacti ...
- Vue Router 获取url路径参数 query
https://router.vuejs.org/zh/api/#路由对象属性 $route.query 类型: Object 一个 key/value 对象,表示 URL 查询参数.例如,对于路径 ...
- 关于华为x1 7.0无法从eclipse发布的更新as发布的apk
目前只在华为x1 7.0手机上发现这个问题,坑大了. MediaPad 10 FHD 华为这款可以安装. HUAWEI G525-U00 华为这款也可以安装. 目前公司就这几款华为手机了. 原因是 在 ...
- CV-视频分析:静态背景下的运动检测
ref : Chapter 2 Motion Detection in Static Backgrounds. [ Github :…… ] -------------------------- ...
- AL2018届校招笔试——自然语言处理
[单选40min+在线编程80min] 单选 1.以下进程的哪些行为不会导致操作系统向该进程发送一个信号?() A. 程序终止退出 B. 访问了一个非法的内存地址 C. 一个该程序正在监听的socke ...
- Tcp Ip -- tcpdump win窗口大小
问题介绍 今天,有内部模块与外部系统断连. (外部系统smgw,内部接口interface) smgw <----> interface 有消息交互. 通过tcpdump -xns0 po ...
- spring-cloud-config笔记
忽略元数据末尾 回到原数据开始处 spring-cloud-config 简单来讲就是spring-cloud实现的分布式配置中心.与之前介绍的开源配置服务方案 disconf是一样的,spring- ...
- 定时检测Memcached进程是否存在,若不存在自动启动它
由于一台WEB服务器的Memcached死掉而导致在访问网站的某些页面时候打不开.下面脚本会自动检测Memcached的进程,如果挂掉则自动重启Memcached服务. vim memcached_c ...
- [svc]几种访问google方案
最近老被人问起,有什么访问谷歌的方法可以推荐. 针对小白用户(使用sass式即可) iass sass pass区别 小白可以用(无需安装软件,些许收费):googlegae: https://m.2 ...