作者:菲呀菲呀飞呀 | 来源:互联网 | 2023-05-31 18:58
第一百四十八节,封装库--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>教育博文1h2>
<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>教育博文2h2>
<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>教育博文3h2>
<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
}
});
})
首先引入封装库