文章分类 Classification
jquery弹性菜单
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-01-25 阅读次数: 135 查看权限: 游客查看
jquery弹性菜单
查看效果:http://down.scscms.com/javascript/jqmenu.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <style type="text/css"> ul{ position: absolute; top:40px;right:0; width:200px; overflow: hidden; padding:0; } li{ border: 1px solid #1e82dd; border-left:20px solid #1e82dd; height:20px; margin:1px; font: 12px/20px "微软雅黑"; width:200px; margin-left:180px; list-style: none; } li:hover{background-color:#dddddd;} </style> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> <li>菜单6</li> <li>菜单7</li> <li>菜单8</li> <li>菜单9</li> <li>菜单10</li> <li>菜单11</li> <li>菜单12</li> <li>菜单13</li> <li>菜单14</li> <li>菜单15</li> <li>菜单16</li> <li>菜单17</li> <li>菜单18</li> <li>菜单19</li> <li>菜单20</li> <li>菜单21</li> <li>菜单22</li> <li>菜单23</li> </ul> <script type="text/javascript"> $(document).ready(function(){ var last= 0,move=true; $("ul").mouseenter(function(){ $("li").mouseenter(function(){ if(move)elasticity($("li"),$(this).index(),0); move=false; }).mouseleave(function(){ last=$(this).index() }); }).mouseleave(function(){ elasticity($("li"),last,180); move=true; }); }); function elasticity(li,i,l){ var len=li.size(),mid= 0,tout,s="slow"; function fun(i,o,l){ clearTimeout(tout); if(o==0){ o =i>(len-1)/2?-1:1; mid=i*2; li.eq(i).stop().animate({marginLeft:l},s); } i+=o; var ii=mid-i; if(i<len&&i>=0){ tout=setTimeout(function(){ if(ii<len&&ii>=0) li.eq(ii).stop().animate({marginLeft:l},s); li.eq(i).stop().animate({marginLeft:l},s); fun(i,o,l); },100); } } fun(i,0,l); } </script>
关键词: jquery,弹性菜单 编辑时间: 2013-09-16 14:22:36
1
高兴0
支持0
搞笑0
不解0
谎言0
枪稿0
震惊0
无奈0
无聊0
反对0
愤怒
100%(1)
0%(0)
- 中搜索:jquery弹性菜单
- 中搜索:jquery弹性菜单
- 暂无评论
文章图片 article Pictrue
网友评论