一个简单的滑动门示例（附源码）

来源：互联网发布：杜兰特各赛季数据统计编辑：程序博客网时间：2024/05/01 15:12

案例：滑动门

html代码如下：

<!doctype html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="styles/reset.css">        <link rel="stylesheet" href="styles/slidingdoors.css">        <script type="text/javascript" src="scripts/slidingdoors.js"></script>    </head>    <body>    <div id="container">        <img alt="美女图_01" src="images/girl_01.jpg" title="美女图_小玲" >        <img alt="美女图_02" src="images/girl_02.jpg" title="美女图_小玲">        <img alt="美女图_03" src="images/girl_03.jpg" title="美女图_小玲">        <img alt="美女图_04" src="images/girl_04.jpg" title="美女图_小玲">    </div>    </body></html>

其中
1. 声明了该html是html5的规则
2. 美女图_01 中alt表示图片显示不正常时，显示的文字，而title是鼠标放在图片上面的提示。

slidingdoors.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);    }};

其中，

   (function(i){            };        })(i);

是立即执行函数，表示已加载就执行。
而parseInt(imgs[j].style.left, 10)中的作用是因为：imgs[j].style.left的值含有px是字符串，为了做加减法，因此要转化为整数。

附录：其他代码如下：

为了屏蔽浏览器默认样式的显示差异，添加html5 的reset.css 文件，其内容为：

/* html5doctor.com Reset Stylesheetv1.4.1 2010-03-01Author: Richard Clark - http://richclarkdesign.com*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:1;}:focus {    outline: 1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {     display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:0;    padding:0;    border:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}ins {    background-color:#ff9;    color:#000;    text-decoration:none;}mark {    background-color:#ff9;    color:#000;     font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted #000;    cursor:help;}table {    border-collapse:collapse;    border-spacing:0;}hr {    display:block;    height:1px;    border:0;       border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}input, select {    vertical-align:middle;}

slidingdoors.css 样式如下：

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

1 0