javascript图片滑动效果实现

更新时间：2021年01月28日 16:25:47 作者：小平果118

这篇文章主要介绍了超实用的javascript图片滑动效果实现方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下

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

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

简单的CSS加JS操作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;
}

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滑动操作汇总

jquery滑动操作汇总

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

您可能感兴趣的文章:

浅析javascript闭包实例分析
闭包是一个拥有许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是环境表达式的一部分。
2010-12-12
JS生成唯一id方式之UUID和NanoID
这篇文章主要介绍了JS生成唯一id方式之UUID和NanoID，唯一id有了更好的方式，那就是NanoID，今天这篇文章记录一下NanoID 正在取代 UUID？及js 生成uuid及NanoID的方法，下面来看文章的详细介绍
2021-12-12
详解JavaScript类型判断的四种方法
这篇文章主要介绍了JavaScript类型判断的四种方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-10-10
点击按钮或链接不跳转只刷新页面的脚本整理
点击按钮或链接时不跳转只刷新页面，在某些情况下还是比较实用的，下面整理些不错的示例，感兴趣的朋友可以参考下
2013-10-10
UNiAPP中如何使用render.js绘制高德地图
这篇文章主要介绍了UNiAPP中如何使用render.js绘制高德地图,renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5，文中给大家提到了renderjs的主要作用，需要的朋友可以参考下
2022-05-05
ionic中的$ionicPlatform.ready事件中的通用设置
$ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件，相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理
2017-06-06
javascript 实现父窗口引用弹出窗口的值的脚本
javascript 实现父窗口引用弹出窗口的值的脚本...
2007-08-08
JS实现checkbox互斥(单选)功能示例
这篇文章主要介绍了JS实现checkbox互斥(单选)功能,涉及JavaScript针对页面元素属性的判断及动态操作相关实现技巧,需要的朋友可以参考下
2019-05-05
JS文件上传时如何使用MD5加密
这篇文章主要介绍了JS文件上传时如何使用MD5加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Three.js加载外部模型的教程详解
这篇文章主要介绍了Three.js外部模型加载的教程详解,在文章给大家补充介绍了three.js 外部模型加载json的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-11-11