基于JavaScript实现滑动门效果

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

滑动门效果

原理:

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

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

第二道门左边的距离是80px, 第三道门左边的距离是160px。(200-40)px 第四道门不变

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

程序:

rush:js;">

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...