$(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. poj1474Video Surveillance(半平面交)

    链接 半平面交的模板题,判断有没有核.: 注意一下最后的核可能为一条线,面积也是为0的,但却是有的. #include<iostream> #include <stdio.h> ...

  2. iOS 开发之 Xcode6 创建真机调试证书

    http://jingyan.baidu.com/article/ff411625b8141312e48237a7.html 1.登录苹果开发者中心 2.登录后的界面如图所示,如果没有最上面的两个选项 ...

  3. 转!!java中关键字volatile的作用

    用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对A的访问其实访问的是B.只在某些动作时才进行A和B的同步.因此存在A和B不一致的情况.volatile就是用来 ...

  4. android中textview设置为多行文本时,如何让文字从最顶开始显示

    <span style="white-space:pre"> </span><EditText android:layout_width=" ...

  5. svn 合并分支 等

    [转载]svn分支(branch)创建.合并(到trunk).冲突解决. Leave a reply 转载自:http://zccst.iteye.com/blog/1430823 一.创建分支 1, ...

  6. IE浏览器打印合格证相关问题

    0.打印机驱动,打印参数设置,首选项配置,数值都必须精确. 1.google浏览器死都不兼容,上下行之间会重叠. 解决方案:必须IE 2.IE 10,IE 11 需要开兼容性视图设置,添加该网站.不然 ...

  7. Python主文件路径和当前模块路径

    主执行文件路径sys.argv[0]                                                                                   ...

  8. UIStepper

    @在IOS5中增加了一个UIStepper的新控件,UIStepper可以连续增加或减少一个数值.控件的外观是两个水平并排的按钮构成,一个显示为“+”,一个显示为“-”. 1. 初始化控件 UISte ...

  9. jQuery笔记一

    陆续更新中..... 1,创建标签的时候可以提前写好,以后用clone()方法克隆即可. 如: var div=$("<div></div>"); var ...

  10. robotframework笔记11

    测试用例的语法 基本语法 测试用例构造测试用例表中可用 关键词. 关键字可以进口 测试库 或 资源 文件 或创建的 关键字表 的测试用例文件 本身. 测试用例表中第一列包含测试用例的名称. 一个 测试 ...