javascript图片滑动效果实现

本文为大家分享了javascript图片滑动效果实现方法，具体内容如下，先看一下效果图：

鼠标滑过那张图，显示完整的哪张图，移除则复位：

简单的CSS加JS操作DOM实现：

sliding doors

css:

#container {

height: 477px;

margin: 0 auto;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

overflow: hidden;

position: relative;

}

#container img {

position: absolute;

display: block;

left: 0;

border-left: 1px solid #ccc;

}

js操作：

window.onload = function() {

//容器对象

var box = document.getElementById('container');

//获得图片NodeList对象集合

var imgs = box.getElementsByTagName('img');

//单张图片的宽度

var imgWidth = imgs[0].offsetWidth;

//设置掩藏门体露出的宽度

var exposeWidth = 180;

//设置容器总宽度

var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;

box.style.width = boxWidth + 'px';

//设置每道门的初始位置

function setImgsPos() {

for (var i = 1, len = imgs.length; i < len; i++) {

imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';

}

}

setImgsPos();

//计算每道门打开时应移动的距离

var translate = imgWidth - exposeWidth;

//为每道门绑定事件

for (var i = 0, len = imgs.length; i < len; i++) {

//使用立即调用的函数表答式，为了获得不同的i值

(function(i) {

imgs[i].onmouseover = function() {

//先将每道门复位

setImgsPos();

//打开门

for (var j = 1; j <= i; j++) {

imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';

//imgs[j].style.left = j*exposeWidth +"px";

}

};

imgs[i].onmouseout = function(){

setImgPos();

};

})(i);

}

};

希望本文所述对大家学习javascript程序设计有所帮助。相关阅读:

JSP errorPage设置方法

Windows 10 Insider会员从今天开始会收到正式版弹窗提示

Android简单音乐播放实例

javascript随机显示背景图片的方法

php将图片文件转换成二进制输出的方法

win10无法收到10532版本更新推送怎么办？

U盘怎么安装Win10一周年正式版 Win10一周年更新正式版U盘安装图文详解

php基于socket实现SMTP发送邮件的方法

关于input的file 控件及美化

android中把文件保存到sdcard代码实例

JS中使用sort结合localeCompare实现中文排序实例

PL/SQL实现JAVA中的split()方法的例子

MySQL优化之对RAND()的优化方法

2种Java删除ArrayList中的重复元素的方法