第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

正在回答

4 回答

以上是案例完整的代碼，加了css3動(dòng)畫(huà)，鼠標(biāo)離開(kāi)時(shí)可以恢復(fù)到原始位置(注釋部分)。

0 回復(fù) 有任何疑惑可以回復(fù)我~ 
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>滑動(dòng)門(mén)特效</title>
<link?rel="stylesheet"?href="css/style.css">
</head>
<body>
<div?id="container">
<img?src="images/door1.png"?alt="door1"?title="door1">
<img?src="images/door2.png"?alt="door2"?title="door2">
<img?src="images/door3.png"?alt="door3"?title="door3">
<img?src="images/door4.png"?alt="door4"?title="door4">
</div>
</body>
<script?src="js/script.js"></script>
</html>


0 回復(fù) 有任何疑惑可以回復(fù)我~ 

*{
	margin:0;
	padding:0;
}
#container{
	position:relative;
	height:?477px;
	margin:20px?auto;
	border-bottom:1px?solid?#d9d9d9;
	border-right:1px?solid?#d9d9d9;
	overflow:?hidden;
}

#container?img{
	position:?absolute;
	left:0;
	display:block;
	border-right:?1px?solid?#d9d9d9;
	transition:?all?0.5s;
}
#container?img:nth-child(1){
	border-left:?1px?solid?#d9d9d9;
}


0 回復(fù) 有任何疑惑可以回復(fù)我~ 
window.onload?=?function(){
	//獲取盒子對(duì)象
	var?box?=?document.getElementById('container');
	//獲取圖片對(duì)象
	var?imgs?=?box.getElementsByTagName('img');

	var?imgWidth?=?imgs[0].offsetWidth;?//單張圖片的寬度
	var?exposeWidth?=?160;				//隱藏門(mén)露出寬度
	var?boxWidth?=?imgWidth+exposeWidth*(imgs.length-1);	//圖片盒子寬度
	box.style.width?=?boxWidth+'px';	

	//設(shè)置每道門(mén)的初始位置
	function?setImgsPos(){
		for(var?i=1;i<imgs.length;i++){
			imgs[i].style.left?=?imgWidth?+?exposeWidth*(i-1)+'px';
		}
	}	
	setImgsPos();

	//?計(jì)算每張圖片移動(dòng)的距離
	var?translate?=?imgWidth?-?exposeWidth;	
	//為每道門(mén)綁定事件
	for(var?i=0;i<imgs.length;i++){		
		(function(i){
			imgs[i].onmouseover?=?function()?{
				setImgsPos();
				//打開(kāi)門(mén)
				for?(var?j?=?1;j<=i;j++)?{
					imgs[j].style.left?=?parseInt(imgs[j].style.left,10)?-?translate?+?'px';	//10代表十進(jìn)制
				}
			};

		})(i);
	}

	//鼠標(biāo)移出后復(fù)位
	//?for(var?i=0;i<imgs.length;i++){		
	//?	imgs[i].onmouseleave?=?function(){
	//?		setImgsPos();
	//?	}
	//?}
};


0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消

sublime里js代碼高亮用什么插件啊

我要回答 關(guān)注問(wèn)題
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)