最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于JavaScript实现滑动门效果
时间:2017-07-03 编辑:简简单单 来源:一聚教程网
滑动门效果:
一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示。
假设图片的宽度是120px,其他三道门露出的宽度是80px。
初始状态下,
第二道门左边的距离是120px,
第三道门左边的距离是200px,
第四道门左边的距离是280px。
当第二道门打开时,
第二道门左边的距离是80px,为(120-40)px
第三道和第四道门左边的距离不变。
当第三道门打开时,
第二道门左边的距离是80px,
第三道门左边的距离是160px。(200-40)px
第四道门不变
因此每道门打开,是图片的宽度减去露出的宽度,就是需要向左移动的距离。第三道门打开,第二道门需要先做移动,然后第三道门移动。每道门移动的距离都是图片的宽度减去露出来的宽度。
程序:
代码如下 | 复制代码 |
window.onload =function() { varcontainer = document.getElementById("container"); varimgs = container.getElementsByTagName("img");//获取图像 varimgWidth = imgs[0].offsetWidth;//图片的宽度 varexposeWidth = 200;//露出的宽度 varcontainerWidth = imgWidth + exposeWidth * (imgs.length - 1);//外部盒子的总宽度 container.style.width = containerWidth +"px";
functionInitial() { for(vari = 1; i < imgs.length; i++) { imgs[i].style.left = imgWidth + exposeWidth * (i - 1) +"px"; } } Initial(); vartranslateWidth = imgWidth - exposeWidth;//移动的距离 for(vari = 0; i < imgs.length; i++) { (function(i) { imgs[i].onmouseover =function() { Initial();//鼠标经过图片时,首先设置到初始状态 for(varj=1;j<=i;j++) {//之前的图片都移动相同的距离 imgs[j].style.left=parseInt(imgs[j].style.left)-translateWidth+"px"; } } })(i); }
} |
-
上一个: 基于Vue2.0的分页组件
-
下一个: JS异步加载的三种实现方式
相关文章
- 无线网连接提示没有有效的IP配置解决方法 03-08
- javascript实现下雨效果 07-28
- javascript实现圣旨卷轴展开效果(代码分享) 07-20
- JavaScript实现星星等级评价功能 07-14
- javascript实现滑动解锁功能 07-14
- 十大热门的JavaScript框架和库 07-13