JavaScript实现图片滑动展示效果

作者：像素漫游时间：2026-10-29 16:42:42浏览：396

本文介绍如何使用简单的CSS布局结合JavaScript DOM操作，实现鼠标悬停时图片展开、移出时复位的滑动效果。通过计算容器宽度与单图宽度，动态调整图片位置，无需复杂库即可实现流畅的交互体验。

图片滑动效果概述

本文分享了利用JavaScript实现图片滑动展示的具体方法，首先通过效果图直观了解最终呈现的交互状态。

图片滑动效果概述

交互逻辑设定为：当鼠标滑过某张图片时，该图片完整显示；当鼠标移开时，图片自动恢复至初始状态。

图片滑动效果概述

CSS与JS实现方案

该效果可通过基础的CSS样式配合JavaScript对DOM元素的直接操作来轻松实现。


<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>sliding doors</title>
 <link rel="stylesheet" href="styles/reset.css" />
 <link rel="stylesheet" href="styles/slidingdoors.css" />
 <script src="scripts/slidingdoors.js"></script>
 </head>
 <body>
 <div id='container'>
 <img src="images/door1.png" alt="1080P神器" title="1080P神器" />
 <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" />
 <img src="images/door3.png" alt="四核5寸" title="四核5寸" />
 <img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />
 </div>
 </body>
</html>

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

JavaScript部分负责获取DOM元素，计算容器总宽度及单张图片宽度，并动态设置每张图片的初始位置及鼠标悬停时的位移逻辑。


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

图片滑动效果概述

CSS与JS实现方案

相关资源推荐