1. 程式人生 > >使用javascript超時呼叫模擬QQ劃過頭像,從側邊顯示等級

使用javascript超時呼叫模擬QQ劃過頭像,從側邊顯示等級

1.、當滑鼠滑過頭像時,讓側邊顯示出來 。

2、當滑鼠離開頭像時,讓側邊延時消失,防止使用者離開頭像划向側邊時,由於中間有間隙側邊消失,增加超時呼叫。

3、當滑鼠滑過側邊時,側邊顯示出來,

4、當滑鼠從側邊划向頭像時,防止使用者離開側邊划向頭像時,由於中間有間隙側邊消失,增加超時呼叫。

5、如果使用者劃回頭像,則側邊顯示,如果划向其他區域則側邊消失。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移入延時</title>
	<style>
		.box{
			position: relative;
			width: 300px;
			height: 600px;
			margin:0 auto;
			background-color: blue;
			border-radius: 16px;
			box-shadow: 1px 1px 10px 2px orange;
			padding: 20px 10px 0;
			font-size: 20px;
			box-sizing:border-box;
			
		}
		.children{
			position: absolute;
			top:0;
			right: 108%;
			width: 200px;
			height: 200px;
			border-radius: 6px;
			background-color: gray;
			display: none;
			padding: 20px 10px 0;
			font-size: 16px;
			box-sizing:border-box;
			color: #fff;
		}
		.child{
			position: absolute;
			top:60px;
			left: 20px;
			width: 80px;
			height: 80px;
			background-color: purple;
			border-radius: 6px;
			box-shadow: 1px 1px 10px 2px orange;
			line-height: 80px;
			text-align: center;
			color: red;
			cursor: pointer;
		}
	</style>
	<script>
		window.onload=function(){
			var oDiv1=document.getElementById("div1");
			var oDiv2=document.getElementById("div2");
			var timer=null;
			oDiv1.onmouseover=oDiv2.onmouseover=function(){
				oDiv1.style.display="block";
				clearTimeout(timer);
				
			}
			oDiv1.onmouseout=oDiv2.onmouseout=function(){
				timer=setTimeout(function(){
					oDiv1.style.display="none";
				},600);
			}

			//簡化前程式碼:
			// oDiv2.onmouseover=function(){
			// 	oDiv1.style.display="block";
			// 	clearTimeout(timer);
				
			// }
			// oDiv2.onmouseout=function(){
			// 	timer=setTimeout(function(){
			// 		oDiv1.style.display="none";
			// 	},600);
			// }
			// oDiv1.onmouseover=function(){
			// 	oDiv1.style.display="block";
			// 	clearTimeout(timer);
				
			// }
			// oDiv1.onmouseout=function(){
			// 	timer=setTimeout(function(){
			// 		oDiv1.style.display="none";
			// 	},600);
			// }
		}
	</script>
</head>
<body>
	<div class="box">歡迎使用QQ2098
		<div class="children" id="div1">您的QQ等級為999級</div>
		<div class="child" id="div2">頭像</div>
	</div>
</body>
</html>

成果展示: