                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1328

操作

收起

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 回復有任何疑惑可以回復我~

收起回答