Home > Web Front-end > JS Tutorial > jQuery uses the plug-in Lavalamp to achieve dynamic beautification of the navigation bar_jquery

jQuery uses the plug-in Lavalamp to achieve dynamic beautification of the navigation bar_jquery

WBOY
Release: 2016-05-16 17:21:06
Original
1651 people have browsed it

Use the plug-in Lavalamp to achieve the dynamic display effect of the navigation bar. I used animate to achieve it before, but the effect was not very good

Copy the code The code is as follows:

















//// ------lavalamp.js file modification--------------
Copy code The code is as follows:

(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});


return this.each(function() {
var me = $(this),
noop = function(el){

},
$back = $('
  • ').appendTo(me),
    $li = $("li", this),
    curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];


    $li.not(".back").hover(function() { move(this);});


    $(".nav li:eq(0) a").css("color","#FFF");
    function setCurr(el) {alert(el.offsetWidth);
    $back.css({ "left": el.offsetLeft "px", "width": el.offsetWidth "px" });
    curr = el;

    };

    function move(el) {
    $back.each(function() {
    $.dequeue(this, "fx"); }
    ).animate({
    width: el.offsetWidth-40,
    left: el.offsetLeft
    }, o.speed, o.fx,function(){
    var a0=$(".nav li:eq(0) a");
    var a1=$(".nav li:eq(1) a");
    var a2=$(".nav li:eq(2) a");
    var a3=$(".nav li:eq(3) a");
    var a4=$(".nav li:eq(4) a");
    var a5=$(".nav li:eq(5) a");
    if(el.offsetLeft==0){
    $(".nav li:eq(0) a").css("color","#FFF");
    a1.css("color","#000");
    a2.css("color","#000");
    a3.css("color","#000");
    a4.css("color","#000");
    a5.css("color","#000");
    }
    if(el.offsetLeft==92){
    $(".nav li:eq(1) a").css("color","#FFF");
    a0.css("color","#000");
    a2.css("color","#000");
    a3.css("color","#000");
    a4.css("color","#000");
    a5.css("color","#000");
    }
    if(el.offsetLeft==194){
    $(".nav li:eq(2) a").css("color","#FFF");
    a1.css("color","#000");
    a0.css("color","#000");
    a3.css("color","#000");
    a4.css("color","#000");
    a5.css("color","#000");
    }
    if(el.offsetLeft==296){
    $(".nav li:eq(3) a").css("color","#FFF");
    a1.css("color","#000");
    a2.css("color","#000");
    a0.css("color","#000");
    a4.css("color","#000");
    a5.css("color","#000");
    }
    if(el.offsetLeft==398){
    $(".nav li:eq(4) a").css("color","#FFF");
    a1.css("color","#000");
    a2.css("color","#000");
    a3.css("color","#000");
    a0.css("color","#000");
    a5.css("color","#000");
    }
    if(el.offsetLeft==528){
    $(".nav li:eq(5) a").css("color","#FFF");
    a1.css("color","#000");
    a2.css("color","#000");
    a3.css("color","#000");
    a4.css("color","#000");
    a0.css("color","#000");
    }
    });
    };


    });

    };
    })(jQuery);

    效果见http://www.uuspeed.com/
    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template