基于JavaScript实现滑动门效果
更新时间：2017年03月16日 11:37:31 作者：刘小妞
这篇文章主要为大家详细介绍了js实现滑动门效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了滑动门效果的具体代码，供大家参考，具体内容如下
滑动门效果：
原理：
一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。
假设图片的宽度是120px，其他三道门露出的宽度是80px。
初始状态下，
第二道门左边的距离是120px,
第三道门左边的距离是200px,
第四道门左边的距离是280px。
当第二道门打开时，
第二道门左边的距离是80px，为（120-40）px
第三道和第四道门左边的距离不变。
当第三道门打开时，
第二道门左边的距离是80px，
第三道门左边的距离是160px。（200-40）px
第四道门不变
因此每道门打开，是图片的宽度减去露出的宽度，就是需要向左移动的距离。第三道门打开，第二道门需要先做移动，然后第三道门移动。每道门移动的距离都是图片的宽度减去露出来的宽度。
程序：
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById("container");
var imgs = container.getElementsByTagName("img");//获取图像
var imgWidth = imgs[0].offsetWidth;//图片的宽度
var exposeWidth = 200;//露出的宽度
var containerWidth = imgWidth + exposeWidth * (imgs.length - 1); //外部盒子的总宽度
container.style.width = containerWidth + "px";
function Initial() {
for(var i = 1; i < imgs.length; i++) {
imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + "px";
}
}
Initial();
var translateWidth = imgWidth - exposeWidth;//移动的距离
for(var i = 0; i < imgs.length; i++) {
(function(i) {
imgs[i].onmouseover = function() {
Initial(); //鼠标经过图片时，首先设置到初始状态
for (var j=1;j<=i;j++) { //之前的图片都移动相同的距离
imgs[j].style.left=parseInt(imgs[j].style.left)-translateWidth+"px";
}
}
})(i);
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript类的继承多种实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了js多功能分页组件layPage的适用方法，layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，功能多样，想要了解的朋友可以参考下文进行学习2016-05-05
这篇文章主要为大家详细介绍了JS实现电商放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了layui添加动态菜单与选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果,可实现使用JavaScript判断密码框是否获得焦点来隐藏与显示提示文字,非常简单实用,需要的朋友可以参考下2015-11-11
数组的concat()方法想必大家比不陌生吧，在本文为大家介绍下javascript中数组的concat()方法的具体使用，感兴趣的朋友可以参考下2013-12-12
这篇文章主要介绍了如何在 JavaScript 中添加向量(Vector)类,使用不同的方法在 JavaScript 中添加两个向量，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了js实现web留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了JS实现上传文件显示进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
DOM是种符合万维网标准的HTML操纵方式，它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下2016-03-03
最新评论