$(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);    
            }
        });

});    
});

[Jquery]滑动门效果的更多相关文章

  1. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  2. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  4. [Js]滑动门效果

    描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...

  5. jQuery滑动开关按钮效果

    效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. Jquery滑动门实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS实现滑动门效果

    html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin ...

  8. DIV+CSS滑动门效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【原生JS】滑动门效果

    效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> & ...

随机推荐

  1. 从网页(WEB)登录SAP

    以下这篇文章写得很详细,照着做就可以了: http://www.doc88.com/p-293361232332.html   设好后, 默认的端口是80$$, 其中$$是安装SAP时的instanc ...

  2. [转载] 构建微服务:使用API Gateway

    原文: http://mp.weixin.qq.com/s?__biz=MzA5OTAyNzQ2OA==&mid=206889381&idx=1&sn=478ccb35294c ...

  3. bootstrap学习笔记<六>(表单二之按钮)

    按钮(补充) (ps:居中元素可以使用<center></center>标签) 块级按钮(ps:按钮占一整行) <button class="btn btn-p ...

  4. Android性能优化典范(二)

    Google前几天刚发布了Android性能优化典范第2季的课程,一共20个短视频,包括的内容大致有:电量优化,网络优化,Wear上如何做优化,使用对象池来提高效率,LRU Cache,Bitmap的 ...

  5. 用Volley让GridView加载网络图片

    一.布局文件 总共两个布局文件,一个是GridView,还有一个是GridView的item,是NetworkImageView和TextView activity_main.xml <Rela ...

  6. SqlServer_Sql防止注入

    注入式攻击的详细解释SQL下面我们将以一个简单的用户登陆为例,结合代码详细解释一下SQL注入式攻击,与及他的防范措施.对于一个简单的用户登陆可能的代码如下:try{ string strUserNam ...

  7. C#_拆箱跟装箱

    Net的类型分为两种,一种是值类型,另一种是引用类型.这两个类型的本质区别,值类型数据是分配在栈中,而引用类型数据分配在堆上.那么如果要把一个值类型数据放到堆上,就需要装箱操作:反之,把一个放在堆上的 ...

  8. python操作mongodb之七时间和时区

    #时间和时区 import datetime db.test.insert_one({"datetime-datetime-utcnow":datetime.datetime.ut ...

  9. commonJS — 数字操作(for Number)

    for Number github: https://github.com/laixiangran/commonJS/blob/master/src/forNumber.js 代码 /** * Cre ...

  10. 5-2-2 printf参数从右往左压栈

    5-2-2 C中printf计算参数时是从右到左压栈的 #include <stdio.h> int main (int argc, char **argv) { ; ,,,,}; int ...