                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /DOM探索之基础详解篇

试试加以改进的平缓的缓冲滑动门？

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

11:45

木易涛童鞋

2016-09-22

源自：DOM探索之基础详解篇 1-3

关注问题我要回答

1265

操作

收起

4 回答

霍丶回答被采纳 +3 积分
2016-09-23

我还想为每个滑动门加上透明效果就是 mouseover的时候为不透明 mouseout的时候是覆盖着透明的黑色...我怎么弄都弄不出来

0 回复有任何疑惑可以回复我~

收起回答

霍丶

也是用缓冲效果弄的

2016-09-23 回复有任何疑惑可以回复我~

木易涛童鞋提问者

非常感谢！

2016-09-23 回复有任何疑惑可以回复我~

木易涛童鞋提问者

试试我改过的透明度，我取消了移入移出缓冲效果，直接使用课程里的初始方法，就OK了。还有css样式设置，第一张图片的透明度和其他图片的透明度，不过，当鼠标完全移开这个盒子时，按理说第一张图片应该恢复初始值，但是没能达成！

2016-09-23 回复有任何疑惑可以回复我~

查看2条回复

木易涛童鞋提问者
2016-09-23

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

0 回复有任何疑惑可以回复我~

收起回答

木易涛童鞋提问者
2016-09-23

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

0 回复有任何疑惑可以回复我~

收起回答