试试加以改进的平缓的缓冲滑动门？
来源：1-3 实例JS+DOM
木易涛童鞋
2016-09-22 23:57
window.onload = function() {
//容器对象
var box = document.getElementById("container");
var imgs = box.getElementsByTagName("img");
//单张图片的宽度
var imageWidth = imgs[0].offsetWidth;
//设置掩盖门体露出的宽度
var exposeWidth = 160;
//设置容器总宽度
var boxWidth = imageWidth + exposeWidth * (imgs.length - 1);
box.style.width = boxWidth + "px";
//设置每道门 的初始位置
function setImgsPos() {
for(var i=1,len=imgs.length; i<len; i++) {
imgs[i].style.left = imageWidth + exposeWidth * (i - 1) + "px";
}
}
setImgsPos();
//缓冲
function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var speed = (iTarget - obj.offsetLeft)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetLeft == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed +"px";
}
} ,30);
}
//计算每道门打开时应移动的距离
var translate = (imageWidth - exposeWidth);
//为每道门邦定事件
for(var i=0,len=imgs.length; i<len; i++) {
//匿名函数获取不同的i值
(function(i) {
// imgs[i].timer = null;
imgs[i].onmouseover = function() {
// setImgsPos();
for(var j=1; j<=i; j++) {
var iTarget = (imageWidth + exposeWidth * (j - 1) - translate);
startMove(imgs[j], iTarget);
//如果想只是单张移动，如下：
// startMove(this, iTarget);
}
}
imgs[i].onmouseout = function() {
// setImgsPos();
for(var j=1; j<=i; j++) {
var iTarget = (imageWidth + exposeWidth * (j - 1));
startMove(imgs[j], iTarget);
//如上，单张：
// startMove(this, iTarget);
}
}
})(i)
}
}
写回答
关注
4回答
-
- 霍丶
- 2016-09-23 15:10:15
我还想为每个滑动门加上 透明效果 就是 mouseover的时候 为不透明 mouseout的时候是覆盖着透明的黑色...我怎么弄都弄不出来
-
- 木易涛童鞋
- 2016-09-23 21:50:10
<style type="text/css"> body { margin: 0; padding: 0; } #container { margin: 0 auto; height: 477px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; overflow: hidden; position: relative; } #container .door1 { filter: alpha(opacity: 100); opacity: 1; } #container img { position: absolute; display: block; left: 0; border-left: 1px solid #ccc; filter: alpha(opacity: 30); opacity: 0.3; } </style> -
- 木易涛童鞋
- 2016-09-23 21:48:49
window.onload = function() { //容器对象 var box = document.getElementById("container"); var imgs = box.getElementsByTagName("img"); //单张图片的宽度 var imageWidth = imgs[0].offsetWidth; //设置掩盖门体露出的宽度 var exposeWidth = 160; //设置容器总宽度 var boxWidth = imageWidth + exposeWidth * (imgs.length - 1); box.style.width = boxWidth + "px"; //设置每道门 的初始位置 function setImgsPos() { for(var i=1,len=imgs.length; i<len; i++) { imgs[i].style.left = imageWidth + exposeWidth * (i - 1) + "px"; //px别忘了 } } setImgsPos(); //透明度 function startOpacity(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = (iTarget - obj.alpha)/10; speed=speed>0 ? Math.ceil(speed) : Math.floor(speed); if(obj.alpha == iTarget) { clearInterval(obj.timer); } else { obj.alpha += speed; obj.style.filter = "alpha(opacity:" + obj.alpha + ")"; obj.style.opacity = obj.alpha/100; } } ,30); } //计算每道门打开时应移动的距离 var translate = imageWidth - exposeWidth; //为每道门邦定事件 for(var i=0,len=imgs.length; i<len; i++) { imgs[0].alpha = 100; //匿名函数获取不同的i值 (function(i) { imgs[i].timer = null; imgs[i].alpha = 30; imgs[i].onmouseover = function() { //先复位每道门 setImgsPos(); //打开门 startOpacity(this, 100); for(var j=1; j<=i; j++) { imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px"; } } imgs[i].onmouseout = function() { setImgsPos(); startOpacity(this, 30); } })(i) } } -
- 霍丶
- 2016-09-23 14:01:22
为什么不用清除定时器呐？
DOM探索之基础详解篇
要知道前端大牛都是从精通DOM开始的，全面讲解DOM的基础知识
98356 学习 · 259 问题
相似问题