$(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. c++ 临时变量

    C++的临时变量 它们是被神所遗弃的孩子,没有人见过它们,更没有人知道它们的名字.它们命中注定徘徊于命运边缘高耸的悬崖和幽深的深渊之间,用自己短暂的生命抚平了生与死之间的缝隙.譬如朝露,却与阳光无缘. ...

  2. JS 命名冲突

    1. JS中全局变量和局部变量重名会导致在指定域内无法取到变量: 2. 取出的结果为undefined;

  3. mysql 并发控制

    1.多个线程同时修改数据,存在数据不一致的情况,也就是并发控制的问题.2.mysql提供读锁和写锁,读锁之上可以再加读锁,不能加写锁,而写锁之上不能加任何锁.也就是说,读锁是共享的,写锁是排他的.3. ...

  4. DDL之操作表

    DDL之操作表 DDL是数据定义语言,用来定义数据库对象:数据库.表.列等.其中定义数据库我们已经在DDL之操作数据库中详细讲解了,今天我们来学习使用DDL操作表. 1.创建表 使用数据定义语言创建表 ...

  5. SurfaceHolder.Callback

    Class Overview A client may implement this interface to receive information about changes to the sur ...

  6. 基础4 Android基础

    基础4 Android基础 1. Activity与Fragment的生命周期. Activity生命周期 打开应用 onCreate()->onStart()->onResume 按BA ...

  7. 将一堆石子分成多堆——Multi-SG 游戏

    这类博弈只需要记住一点,一个由多个游戏组成的游戏sg值为这多个游戏的sg值异或和. 也就是所有对一整个nim游戏它的sg值即为每一小堆的sg的异或和. hdu 5795 这题就是可以选择把一堆石子分成 ...

  8. IIS_Mvc发布

    网站发布步骤: 这部分是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接 ...

  9. 使用node js 操作 Mysql 数据库

    使用node js 操作 Mysql 数据库 http://www.nodejs.org/ //node js 数据库操作 MySQL //使用https://github.com/felixge/n ...

  10. JBPM工作流入门总结

    关于JBPM工作流 1.工作流 工作流是一项分离业务操作和系统流程的技术.工作流由实体(Entity).参与者(Participant).流程定义(Flow Definition).工作流引擎(Eng ...