javascript图片滑动效果实现_javascript技巧
程序员文章站
2022-04-13 08:15:31
...
本文为大家分享了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
希望本文所述对大家学习javascript程序设计有所帮助。