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程序设计有所帮助。
-
本文向大家介绍Android实现探探图片滑动效果，包括了Android实现探探图片滑动效果的使用技巧和注意事项，需要的朋友参考一下 之前一段时间，在朋友的推荐下，玩了探探这一款软件，初玩的时候，就发现，这款软件与一般的社交软件如陌陌之类的大相径庭，让我耳目一新，特别是探探里关于图片滑动操作让人觉得非常新鲜。所以在下通过网上之前的前辈的经历加上自己的理解，也来涉涉水。下面是网上找的探探的原界面 当时
-
本文向大家介绍JavaScript实现滑动门效果，包括了JavaScript实现滑动门效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码，供大家参考，具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法, 二、实现滑
-
本文向大家介绍Android使用ViewPager实现图片滑动预览效果，包括了Android使用ViewPager实现图片滑动预览效果的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码，供大家参考，具体内容如下 效果图： 滑动前： 滑动后： 代码非常简单，实现起来很容易 xml代码： Activity代码： 以上代码就可以
-
本文向大家介绍Android组件Glide实现图片平滑滚动效果，包括了Android组件Glide实现图片平滑滚动效果的使用技巧和注意事项，需要的朋友参考一下 Glide是一款基于Android的图片加载和图片缓存组件，它可以最大性能地在Android设备上读取、解码、显示图片和视频。Glide可以将远程的图片、视频、动画图片等缓存在设备本地，便于提高用户浏览图片的流畅体验。 Glide最核心的功
-
本文向大家介绍Android实现横向滑动卡片效果，包括了Android实现横向滑动卡片效果的使用技巧和注意事项，需要的朋友参考一下 最近项目上需要实现这样效果的一个页面，本来想找个现成的两下搞定，但是问了半天度娘也没招，索性自己琢磨琢磨（这里边也少不了同事的帮助），先把最终的效果图贴上： 理论上讲，其本质并不复杂，就是一个viewpager，但是第一次实现这样的效果还是要花些时间的，具体的代码如下
-
本文向大家介绍Javascript实现图片轮播效果(一)让图片跳动起来，包括了Javascript实现图片轮播效果(一)让图片跳动起来的使用技巧和注意事项，需要的朋友参考一下 图片轮播效果，在各大网站的首页都能看到，比较常见。下面小编给大家分享这一效果的简单实现。 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我