本文为大家分享了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程序设计有所帮助。