第一百四十八节,封装库--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
}
});
})

首先引入封装库

最新文章

  1. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11
  2. Hibernate框架的总结
  3. AMD规范基本结构
  4. linux+win7双系统重装win7修复grub的办法(转)
  5. (转)mq常用命令
  6. VM安装Ubuntu问题合集(无法联网、中文界面设置、中文输入法etc)
  7. form表单中enctype属性作用
  8. Nginx下编译PHP+Mysql
  9. 调用 Https WebService 使用程序自动生成代理类
  10. POJ 1456 - Supermarket - [贪心+小顶堆]
  11. day 0314函数的进阶
  12. C#题目及答案(1)
  13. py2exe 打包的两种方式
  14. js 之 this的用法
  15. linux C宏定义 转
  16. python测试开发django-25.表单提交之post注册案例
  17. 浅谈ABP最佳实践
  18. 1、cocos2d-x环境安装
  19. async异步方法
  20. LINQ-let子句、join子句

热门文章

  1. qt linux软件打包等
  2. 阻塞与非阻塞、同步与异步、I/O模型
  3. 算法笔记_102:蓝桥杯练习 算法提高 快乐司机(Java)
  4. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
  5. DNS message解析
  6. 彻底删除Oracle 11g的方法
  7. angular过滤器使用 自定义过滤器
  8. python hello wlord
  9. Js日常笔记之数组
  10. selenium2.0 --常用函数2