$(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. JS 和 Java 中URL特殊字符编码方式

    前几天遇到url特殊字符编码的问题,在这里整理一下: JavaScript 1.  编码 escape(String) 其中某些字符被替换成了十六进制的转义序列. 解码 unescape(String ...

  2. ecnu1624求交集多边形面积

    链接 本来在刷hdu的一道题..一直没过,看到谈论区发现有凹的,我这种方法只能过凸多边形的相交面积.. 就找来这道题试下水. 两个凸多边形相交的部分要么没有 要么也是凸多边形,那就可以把这部分单独拿出 ...

  3. Object Pascal 语法之异常处理

    http://www.cnblogs.com/spider518/archive/2010/12/30/1921298.html 3 结构化异常处理 结构化异常处理(SHE)是一种处理错误的手段,使得 ...

  4. mybatis动态SQL中的set标签的使用

    set标记是mybatis提供的一个智能标记,我一般将其用在修改的sql中,例如以下情况: <update> update user <set> <if test=&qu ...

  5. SecureCRT设置

    SecureCRT设置 文章来源:http://blog.csdn.net/dongqinliuzi/article/details/39890569 本文主要介绍SecureCRT的使用方法和技巧. ...

  6. jQuery中对属性的增删改查

    获取元素的属性 $('input').attr('type') .attr()  可以获取和设置自定义属性 .prop()  只能获取和设置固有属性 在设置属性值时 建议不要修改type属性,有的浏览 ...

  7. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  8. sap 中怎样把非限制库存转为销售订单库存?

    把非限制库存转为销售订单库存: MB1B 移动类型413 把销售订单库存转为非限制库存: MB1B移动类型411 E 切记!

  9. 屏幕输出VS文件输出

     问题1:我们在编写程序时经常需要数一些数据到屏幕,来查看我们的结果是否正确,虽然直接输出到屏幕,查看起来呢很方便,但当数据量很大时,需要耗费大量的时间.于是我们想到能不能通过输出到文件来减少时间 ...

  10. Gradle 教程:第一部分,安装【翻译】

    原文地址:http://rominirani.com/2014/07/28/gradle-tutorial-part-1-installation-setup/ 在这篇教程里,我们将主要讲解如何在我们 ...