简单滑动门js代码_javascript的拉闸代码-CSDN博客

本文链接：https://blog.csdn.net/chenshu0/article/details/53378702

代码如下

学习点

立即调用的函数表达式

//使用立即调用的函数表答式，为了获得不同的i值
for(i=0;i<5;i++){
    (function(i){
        用的i的内容
    })(i);
}

了解更多请点击
2. 逻辑解释

    //计算每道门打开时应移动的距离
    var translate = imgWidth - exposeWidth;

    //为每道门绑定事件
    for (var i = 0, len = imgs.length; i < len; i++) {
        //使用立即调用的函数表答式，为了获得不同的i值
        (function(i) {
            imgs[i].onmouseover = function() {
                //先将每道门复位
                setImgsPos();
                //打开门
                for (var j = 1; j <= i; j++) {
                    imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
                    //逻辑就是移入i门时候i及其i前面的门移动
                    //因为0门不做移动所以从j从1开始
                }
            };
        })(i);
    }

js代码

window.onload = function() {
    //容器对象
    var box = document.getElementById('container');

    //获得图片NodeList对象集合
    var imgs = box.getElementsByTagName('img');

    //单张图片的宽度
    var imgWidth = imgs[0].offsetWidth;

    //设置掩藏门体露出的宽度
    var exposeWidth = 160;

    //设置容器总宽度
    var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
    box.style.width = boxWidth + 'px';

    //设置每道门的初始位置
    function setImgsPos() {
        for (var i = 1, len = imgs.length; i < len; i++) {
            imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
        }
    }
    setImgsPos();

    //计算每道门打开时应移动的距离
    var translate = imgWidth - exposeWidth;

    //为每道门绑定事件
    for (var i = 0, len = imgs.length; i < len; i++) {
        //使用立即调用的函数表答式，为了获得不同的i值
        (function(i) {
            imgs[i].onmouseover = function() {
                //先将每道门复位
                setImgsPos();
                //打开门
                for (var j = 1; j <= i; j++) {
                    imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
                }
            };
        })(i);
    }
};

HTML

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sliding doors</title>
        <link rel="stylesheet" href="styles/reset.css" />
        <link rel="stylesheet" href="styles/slidingdoors.css" />
        <script src="scripts/slidingdoors.js"></script>
    </head>
    <body>
        <div id='container'>
            <img src="images/door1.png" alt="1080P神器" title="1080P神器" />
            <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" />
            <img src="images/door3.png" alt="四核5寸" title="四核5寸" />
            <img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />
        </div>
    </body>
</html>

CSS

#container {
    height: 477px;
    margin: 0 auto;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    position: relative;
}

#container img {
    position: absolute;
    display: block;
    left: 0;
    border-left: 1px solid #ccc;
}

reset css


 // Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 //http://cssreset.com
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}