欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript图片滑动效果实现_javascript技巧

程序员文章站 2022-04-13 08:15:31
...
本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图:

javascript图片滑动效果实现_javascript技巧

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

javascript图片滑动效果实现_javascript技巧

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



 sliding doors
javascript图片滑动效果实现_javascript技巧javascript图片滑动效果实现_javascript技巧javascript图片滑动效果实现_javascript技巧javascript图片滑动效果实现_javascript技巧

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程序设计有所帮助。