滑动门效果
滑动门效果简言之就是当鼠标放在折叠的图片上时，图片显示全部。本着能用代码表达的想法坚决不用文字，哈哈，我们一起来看看如何用代码实现吧！
框架，HTML代码 <!DOCTYPE html><html lang="en"><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><p id="container"> <img src="images/ty1.png" alt="1080p神器" title="1080p神器" />//图片路径要写对<img src="images/ty2.png" alt="1080p神器" title="1080p神器" /><img src="images/ty3.png" alt="1080p神器" title="1080p神器" /><img src="images/ty4.png" alt="1080p神器" </html>
2.样式，CSS代码
这是reset.css.可以直接在网上下载，目的是重置页面所
html, body, p, 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:rder-spacing: 0;}border-collapse: collspac}
例体CSS样式，如下:
3.行为，JS代码
window.onload=function(){//容器对象var box=document.getElementById('container');//获取图片的list集合var imgs=box.getElementsByTagName('img');//获取图片的宽度var imgWidth=imgs[0].offsetWidth;alert("imgWidth");//设置掩藏们体露出的宽度var exposeWidth=60;//设置容器总宽度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.lft=parseInt(imgs[j].style.left,10)-tra`````sla'px';}};})(i);}};
微信便捷交流