$(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. iOS开发 字符串添加行间距

    + (CGFloat)achiveWidthAttrString:(NSAttributedString *)attrString withHeight:(CGFloat)height { CGRec ...

  2. django在pyhton2.7 和 python3.* 之间代码和睦相处的方法

    “祥”龙第一掌: from __future__ import unicode_literals from django.utils.encoding import python_2_unicode_ ...

  3. <转> jsp页面向action传值的方法(最后一种简单)

    多的不说,直接上代码; struts.xml代码: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...

  4. mac 下基于firebreath 开发多浏览器支持的浏览器插件

    mac 下基于firebreath 开发多浏览器支持的浏览器插件 首先要区分什么是浏览器扩展和浏览器插件;插件可以像本地程序一样做的更多 一. 关于 firebreath http://www.fir ...

  5. PC-1500的代码存入WAV文件

    目录 第1章保存    1 1.1 操作    1 1.2 波形说明    4 1.3 波形整形    5 1.4 压缩    8 第2章载入    9 2.1 操作    9 2.2 音量    9 ...

  6. 慎用GetOpenFileName

    这两天发现了一个小问题,经过一上午的排查终于找到了问题的原因--Windows 7的API函数GetOpenFileName竟然有BUG! 请参考下面的MFC代码: CFileDialog dlg(T ...

  7. 【bzoj1052】覆盖问题

    [bzoj1052]覆盖问题 分析 考虑二分\(L\)的值,然后判断3个\(L*L\)能否覆盖所有的点. 这时候出现了两种可能的思路. 思路1 首先,3是一个很小的常数. 我们想:假如能探究出1和2的 ...

  8. Completely disable mousewheel on a WinForm

    this.MouseWheel += new MouseEventHandler(Form_MouseWheel); private void Form_MouseWheel(object sende ...

  9. [bootstrap] bootstrap 简介和相关网址

    Bootstrap 来自 Twitter,是目前很受欢迎的前端框架. 基于 HTML.CSS.JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CS ...

  10. hdu------(3549)Flow Problem(最大流(水体))

    Flow Problem Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...