当前位置:Gxlcms > JavaScript > 基于JavaScript实现滑动门效果的代码实例介绍(图文)

基于JavaScript实现滑动门效果的代码实例介绍(图文)

时间:2021-07-01 10:21:17 帮助过:7人阅读

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

滑动门效果:

原理:

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

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

程序:

以上就是基于JavaScript实现滑动门效果的代码实例介绍(图文)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行