javascript dom特效滑动门

来源：互联网发布：unity 特效贴图优化编辑：程序博客网时间：2024/04/30 15:44

今天看到一个滑动门的特效，最近也一直在看基础javascript dom操作，因此使用css+html+原生javascript编写了一个，有效果但不是很流畅

下面分别贴上html+css代码，这两个代码段比较简单，就不做解释了

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="css/style_slide.css">    <link rel="stylesheet" href="css/reset.css">    <script style="text/javascript" src="js/sliding_door.js"></script></head><body>    <div id="container">        <img src="images/1.jpg" alt="">        <img src="images/2.jpg" alt="">        <img src="images/3.jpg" alt="">        <img src="images/4.jpg" alt="">    </div></body></html>

上述图片文件路径以及引用路径都需要自己改一下，我是在webstorm里写的，所以具体我就不解释了

reset.css是为了消除浏览器默认的样式，以前还不知道这么一大堆是做什么用的

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% ;    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: none;}table {    border-collapse: collapse;    border-spacing: 0;}

接下来是设置原有css样式style_slide.css

#container{    height: 270px;    margin: 0 auto;    border-right: 1px solid #0f0f0f;    border-bottom: 1px solid #0f0f0f;    overflow: hidden;    position: relative;}#container img{    position: absolute;    display:block;    left:0;    border-left:1px solid  #f0ad4e;}

接下来是重头戏原生js，操作

/** * Created by lichunyu on 2016/6/7. */window.onload = function(){    //容器    var box = document.getElementById("container");    var imgNode = box.getElementsByTagName("img");    var imgWidth = imgNode[0].offsetWidth;//获取第一个个img节点宽    var exposeWidth = 160;//设定暴露在外面的节点宽度    var boxWidth = imgWidth + (imgNode.length-1)*exposeWidth;//计算出盒子的宽度    box.style.width = boxWidth + 'px';//style属于dom语句    function setPosition() {        for (var i = 1; i < imgNode.length; i++) {            var positinLeftDoor = imgWidth + (i - 1) * exposeWidth;            imgNode[i].style.left = positinLeftDoor + 'px';        }    }//将初始位置设定成函数并调用    setPosition();    var translate = imgWidth - exposeWidth;//计算出每个应该滑动的距离    for(var j=0;j<imgNode.length;j++){        (function(j){            imgNode[j].onmouseover = function(){//绑定事件                setPosition();//这个比较重要可以隐藏掉试试出了什么问题                for(var i=1;i<=j;i++){                    imgNode[i].style.left = parseInt(imgNode[i].style.left,10)-translate +'px';                }            }        })(j);//立即调用函数    }};

0 0