zoukankan      html  css  js  c++  java
  • [Jquery]滑动门效果

    $(function(){
        var $box=$("#box");
        var $img=$box.find("img");
        var imgWidth=$img.eq(0).width();
        var exposeWidth=160;
        var boxWidth=imgWidth+exposeWidth*($img.length-1);
        var translate=imgWidth-exposeWidth;
        $box.width(boxWidth);
        $img.not($img.eq(0)).each(function(i){   //i从0开始
            var left=imgWidth+i*exposeWidth;
            $(this).css("left",left);
            $(this).data("pos",left);                       //向pos元素附加数据left
        });
        $img.each(function(i){
            $(this).mouseover(function(){
                //开门
                for(var j=1;j<=i;j++){
                    var $imgs=$img.eq(j);
                    $imgs.animate({"left":$imgs.data("pos")-translate},200);              //从pos元素取得初始位置
                }
                //关门
                for(var j=i+1,len=$img.length;j<len;j++){
                    var $imgs=$img.eq(j);
                    $imgs.animate({"left":$imgs.data("pos")},200);    
                }
            });

        });    
    });

  • 相关阅读:
    3/10
    2/10
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta 冲刺(7/7)
    Beta 冲刺(6/7)
    Beta 冲刺(5/7)
    Beta 冲刺(4/7)
    Beta 冲刺(3/7)
    Beta 冲刺(2/7)
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3865795.html
Copyright © 2011-2022 走看看