基于JavaScript实现滑动门效果

本文实例为大家分享了滑动门效果的具体代码，供大家参考，具体内容如下

滑动门效果：

原理：

一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。 假设图片的宽度是120px，其他三道门露出的宽度是80px。 初始状态下， 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。 当第二道门打开时，

第二道门左边的距离是80px，为（120-40）px 第三道和第四道门左边的距离不变。 当第三道门打开时，

第二道门左边的距离是80px， 第三道门左边的距离是160px。（200-40）px 第四道门不变

因此每道门打开，是图片的宽度减去露出的宽度，就是需要向左移动的距离。第三道门打开，第二道门需要先做移动，然后第三道门移动。每道门移动的距离都是图片的宽度减去露出来的宽度。

程序：

rush:js;">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。