第一百四十八节,封装库--JavaScript,菜单切换
JavaScript封装 -- 切换 菜单
2023-09-14 08:58:24 时间
第一百四十八节,封装库--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 } }); })
首先引入封装库
相关文章
- 【开源】Westore Cloud 发布- 没后端没SQL没DBA,只需 javascript 开发云端小程序
- javascript 简单的计算器
- 第一百五十六节,封装库--JavaScript,延迟加载
- 第一百五十五节,封装库--JavaScript,轮播器
- 第一百三十八节,JavaScript,封装库--插件
- 第一百三十五节,JavaScript,封装库--拖拽
- 第一百三十二节,JavaScript,封装库--下拉菜单
- 第一百三十一节,JavaScript,封装库--CSS
- Javascript获取URL地址变量参数值的方法
- [Javascript] Broadcaster + Operator + Listener pattern -- 2 Unsubscribe from Broadcaster
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] JavaScript赋值时的传值与传址
- javascript转换日期字符串为Date对象
- [Javascript] Prototype Pattern
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Redirect the browser using JavaScript
- Javascript 面向对象编程(一):封装
- 自定义对象_JavaScript
- JavaScript基础语法(函数)
- Java抓取网页数据(原网页+Javascript返回数据)
- JavaScript基础
- web前端Javascript开发学习之JavaScript中的预编译如何进行