«

jQuery实现背景滑动菜单

时间:2024-3-2 08:00     作者:韩俊     分类: Javascript


话不多说,直接附上源码,仅供大家参考

<div class="menu">
 <ul id="menu">
 <li><a href="#">JavaScript</a></li>
 <li value="1"><a href="#">Graphic Design</a></li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">User Interface</a></li>
 <li><a href="#">CSS</a></li>
 </ul>
 <div id="slide"></div>
</div>
* {margin:0; padding:0}
body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF}
.menu {position:relative; background:url(images/bg.gif) no-repeat; height:35px; width:459px}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menu li {float:left}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {text-decoration:none; color:#FFF; padding:10px}
#slide {position:absolute; top:6px; height:24px; background:#89957a; z-index:10;}
(function($){
 $.fn.extend({
 bgslide:function(value){
 //可选参数
 value=$.extend({
 "fw":12,
 "sw":2,
 "ftime":100,
 "stime":300
 },value);
 //初始化背景的位置
 var liw = $("ul li:eq(0)",value.menu).width();//获取第一个li的宽
 var $slide = $(this).children("div"); 
 $slide.css({"width":liw,"left":"5"});
 //悬停时执行动画
 function hani(w,l){
 $slide.stop(true) //很关键的一句话,当悬停时,让正在执行的动画,和列队中的动画,都取消;防止鼠标不停滑动时的bug;
 .animate({"width":w,"left":l+value.fw},value.ftime)
 .animate({"left":l-value.fw},value.stime)
 .animate({"left":l+value.sw},value.stime)
 .animate({"left":l-value.sw},value.stime);
 } 
 //离开时执行动画 
 function oani(){
 $slide.stop(true)
 .animate({"width":liw,"left":"5"},value.ftime)
 .animate({"left":l-value.fw},value.stime)
 .animate({"left":l+value.sw},value.stime)
 .animate({"left":l-value.sw},value.stime);; 
 }
 $("ul li",this).hover(function(){
 var w = $(this).width(); //获取当前li的宽
 var l = $(this).position().left; //获取当前li的横坐标 
 if(!$(this).index()==0){ //鼠标悬停在第一个LI时,不发生动画
 hani(w,l);
 }
 },function(){
 oani();
 });
 } 
 })
})(jQuery);

html结构思路:

  div:放置一个背景图层,相对定位;

  UL:放置菜单内容,绝对定位;

  div:放置滑动的背景层,绝对定位;

JQuery思路分析:

  鼠标悬停到每一个LI的时候,让这个滑动的背景层,通过水平移动动画,来定位到当前这个LI的地方;并有一个左右晃动效果;鼠标离开时,让背景层滑动到初始位置;

鼠标悬停时:

  1.获取当前LI相对于最外层DIV的水平坐标,即横坐标值;

  2.让滑动的背景层的横坐标正好等于当前LI的横坐标;

  3.执行一个左右晃动的动画,即改变当前水平坐标的值;

鼠标离开时:

  1.让背景层滑动到初始位置,即改变横坐标的值,为初始值;

下载Demo地址:http://xiazai.maopiaopiao.com/yuanma/myslidebgmenu(maopiaopiao.com).rar

以上就是本文的全部内容,希望对大家有所帮助,谢谢对毛票票的支持!

标签: javascript

热门推荐