首页 > 代码库 > jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS
jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS
一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类。 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单。感受一下jQuery的简单快速的神奇之处。
学完本章,可以书写最常见的下拉菜单写法。
案例1 效果如图所示:
在书写这个滑动的下拉菜单的时候,我们首先来认识下jQuery里面的滑动方法 :slideToggle()
slideToggle(执行时间,运动方式,返回函数)
执行时间: 常用的是
- "slow" 慢速
- "normal" 正常
- "fast" 快速
但是常用还是 毫秒 比如 300 就是 300毫秒
好了,这个案例的原理,就是先把一级菜单写出来,当鼠标经过的时候,会把相应的二级菜单显示出来。但是我们利用的是滑动显示。
html 代码如下:
首先我们先书写css样式(合理 简洁的css样式写法,会让我们书写js更简单哦)
好了,这个案例的原理,就是先把一级菜单写出来,当鼠标经过的时候,会把相应的二级菜单显示出来。但是我们利用的是滑动显示。
html 代码如下:
<ul class="all"> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li></ul>
首先我们先书写css样式(合理 简洁的css样式写法,会让我们书写js更简单哦)
<style type="text/css">*{ padding:0; margin:0; list-style:none;}.all{ width:330px; height:30px; margin:100px auto; background:url(img/bg.jpg); padding-left:10px;}.all li{ width:100px; height:30px; background:url(img/libg.jpg); line-height:30px; text-align:center; float:left; margin-right:10px; _display:inline; position:relative; cursor:pointer;}.all ul{ position:absolute; left:0; top:30px; display:none;}</style>
注意,二级菜单一定先隐藏哦
然后,我们准备 js代码
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){ $(‘.all>li‘).hover(function(){ $(this).children().stop().slideToggle(300); })})</script>
书写js 代码,有三点需要注意:
1.别忘了引js文件包。
2. hover我们知道,就是 mouseover和mouseout的合体写法
3. 我们发现再slideToggle()前面写了stop() 就是为了防止jQuery的排队机制。
下面小强老师给大家准备了demo文件下载,大家可以好好看看哦。
deom下载地址:http://pan.baidu.com/s/1sjk9XSh
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。