第一百四十八节,封装库--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,菜单切换的更多相关文章

  1. 第一百四十六节,JavaScript,百度分享保持居中--下拉菜单

    JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

  2. 第一百四十五节,JavaScript,同步动画

    JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...

  3. 第一百四十四节,JavaScript,列队动画

    JavaScript,列队动画 将上一节的,移动透明动画,修改成可以支持列队,也就是可以给这个动画方法多个动画任务,让它完成一个动画任务后,在执行第二个动画任务 原理: 就是在原有的动画方法里加一个回 ...

  4. 第一百五十八节,封装库--JavaScript,ajax说明

    封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...

  5. 第一百四十九节,封装库--JavaScript,表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  6. 第一百五十五节,封装库--JavaScript,轮播器

    封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...

  7. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  8. 第一百五十节,封装库--JavaScript,表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  9. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

随机推荐

  1. Discuz常见小问题2-如何修改管理员密码,修改admin账户密码

    进入后台,点击用户,用户管理,搜索admin这个用户找到,然后点击详情   输入新密码即可(无需验证老的密码)          

  2. 我如何向HRMM介绍MICROSERVICE

    一天我司招才猫姐(HR 大人)问我,你给我解释一下 Microservice 是什么吧.故成此文.一切都是从一个创业公司开始的. 第一章:从集中到分权 最近的创业潮非常火爆,我禁不住诱惑也掺和了进去, ...

  3. 从客户端的角度来谈谈移动端IM的消息可靠性和送达机制

    1.前言 IM App 是我做过 App 类型里复杂度最高的一类,里面可供深究探讨的技术难点非常之多.这篇文章和大家聊下从移动端客户端的角度所关注的IM消息可靠性和送达机制(因为我个人对移动客户端的经 ...

  4. ZK框架笔记5、事件

            事件是org.zkoss.zk.ui.event.Event类,它通知应用程序发生了什么事情.每一种类型的事件都由一个特定的类来表示.         要响应一个事件,应用程序必须为事 ...

  5. spring bean parent属性详解

    必要条件:1.子bean必须与父bean保持兼容,也就是说子bean中必须有父bean定义的所有属性. 2.父bean必须是抽象bean或者定义lazy-init=true也就是不让bean工厂实例化 ...

  6. shell中$0,$?,$!等的特殊使用方法

    变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后执行的后台Process的PID $? 最后执行的命令的结束代码(返回值) $- 使用Set命令设定的Flag一览 ...

  7. mysql中的时间类型datetime,date,time,year,timestamp小知识点

    1.datetime,date,time,year四个类型的值,可以手动输入,也可以调用函数获得值 ① 手动输入,格式如下: datetime "2016-6-22 14:09:30&quo ...

  8. 使用swagger实现在线api文档自动生成 在线测试api接口

    使用vs nuget包管理工具搜索Swashbuckle 然后安装便可 注释依赖于vs生成的xml注释文件

  9. EMQ学习笔记---Clean Session和Retained Message

    MQTT会话(Clean Session)MQTT客户端向服务器发起CONNECT请求时,可以通过’Clean Session’标志设置会话.‘Clean Session’设置为0,表示创建一个持久会 ...

  10. 各种MQTT server功能比較

    this page attempts to document the features that various MQTT servers (brokers) support. This is spe ...