php滑动门效果,基于JavaScript实现滑动门效果的代码实例介绍（图文）

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

滑动门效果：

原理：

一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。

假设图片的宽度是120px，其他三道门露出的宽度是80px。

初始状态下，

第二道门左边的距离是120px,

第三道门左边的距离是200px,

第四道门左边的距离是280px。

当第二道门打开时，第二道门左边的距离是80px，为(120-40)px

第三道和第四道门左边的距离不变。

当第三道门打开时，第二道门左边的距离是80px，

第三道门左边的距离是160px。(200-40)px

第四道门不变

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

程序：

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);

}

php滑动门效果,基于JavaScript实现滑动门效果的代码实例介绍（图文）相关推荐

html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
php 菜谱源码,基于php的菜谱大全api调用代码实例
代码描述:基于php的菜谱大全api调用代码实例接口地址:http://www.juhe.cn/docs/api/id/46 PHP代码 // +-------------------------- ...
外汇汇率接口 java_基于JAVA的货币汇率api调用代码实例
代码描述:基于JAVA的货币汇率api调用代码实例关联数据:货币汇率接口地址:http://www.juhe.cn/docs/api/id/23 1.[代码][Java]代码 import jav ...
java 金数据推送数据_基于JAVA的黄金数据接口调用代码实例
代码描述:基于JAVA的黄金数据接口调用代码实例接口地址:http://www.juhe.cn/docs/api/id/29 1.[代码][Java]代码 import java.io.Buffer ...
使用php进行财务统计,基于php的基金财务数据接口调用代码实例
代码描述:基于php的基金财务数据接口调用代码实例关联数据:基金财务数据接口地址:http://www.juhe.cn/docs/api/id/28 1.[代码][PHP]代码 // +----- ...
python名片识别_基于Python的名片识别接口调用代码实例
基于Python的名片识别接口调用代码实例代码描述:基于Python的名片识别接口调用代码实例 #!/usr/bin/python # -*- coding: utf-8 -*- import js ...
外汇汇率接口 java_基于java的货币汇率接口调用代码实例
基于java的货币汇率接口调用代码实例基于JAVA 的货币汇率接口调用代码实例代码描述:基于JAVA 的货币汇率接口调用代码实例代码平台:聚合数据 import java.io.Buffered ...
java用代码实现星期菜谱_基于JAVA的菜谱大全接口调用代码实例
基于JAVA的菜谱大全接口调用代码实例代码描述:基于JA V A的菜谱大全接口调用代码实例接口平台:聚合数据 import java.io.BufferedReader; import java. ...
java实现基金浮动_基于JAVA的重仓股基金接口调用代码实例
代码描述:基于JAVA的重仓股基金接口调用代码实例关联数据:重仓股基金接口地址:http://www.juhe.cn/docs/api/id/27 1.[代码][Java]代码 import ja ...
名片识别信息分类python_基于Python的名片识别接口调用代码实例.doc
基于Python的名片识别接口调用代码实例代码描述:基于Python的名片识别接口调用代码实例 #!/usr/bin/python # -*- coding: utf-8 -*- import js ...

php滑动门效果,基于JavaScript实现滑动门效果的代码实例介绍（图文）

php滑动门效果,基于JavaScript实现滑动门效果的代码实例介绍（图文）相关推荐

最新文章

热门文章