jQuery-插件-背景滑动菜单(第二次自已偿试写插件)-白红宇

jQuery-插件-背景滑动菜单(第二次自已偿试写插件)

阅读量：5946 次

发布时间：2019-06-19

本文共 2610 字，大约阅读时间需要 8 分钟。


         
              
       JavaScript
        
       Graphic Design
        
       HTML
        
       User Interface
        
       CSS

* {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.让背景层滑动到初始位置，即改变横坐标的值，为初始值；