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程序设计有所帮助。
相关文章
这篇文章主要介绍了详解webpack 热更新优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了html5+javascript实现上传操作的注意细节，form表单样式不美观等细节问题，感兴趣的小伙伴们可以参考一下2016-04-04
在ECharts中,可以通过修改series.itemStyle.normal属性来定制柱状图的柱子样式,包括圆角和背景色渐变,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
本文主要介绍了javascript将字符串中的每一个单词的首字母变为大写其余均为小写的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
到网上一位别出心裁的高手使用字符串而不是正则表达式实现了Javascript代码高亮显示，自己受益匪浅，于是就构思了CSS代码的高亮显示。2009-11-11
use jscript List Installed Software
use jscript List Installed Software...2007-06-06
这篇文章主要给大家介绍了关于js中apply和call的理解与使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了uni-app的pages.json处理方案示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了Rxjs 中怎么处理和抓取错误,本文，我们学习了如何使用 catchError 在数据流中抓取错误，怎么去修改和返回 observable，或者使用 EMPTY 不去触发组件中的错误，需要的朋友可以参考下2022-08-08
最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
最新评论