网页特效之鼠标展示

效果：每当鼠标移动到该图片，展示该图片的大图

效果图：

思路：

给div的padding-top值和大图高度一样，并以大图做该div背景

使用onmouseover事件使鼠标移动到图片上时更换div背景

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标展示</title>
	<style type="text/css">
		* {
			margin: 0; 
			padding: 0;
		}
		img{
			border:0;
			vertical-align:middle;
		}
		ul {
			list-style: none;
		}
		#box {
			width:360px;
			height: 70px;
			padding-top: 360px;
			border: 1px solid #ccc;
			margin: 100px auto;
			background: url(images/01big.jpg);
		}
		#box ul li {
			float: left;
			cursor: pointer;
			border-left: 2px solid #fff;
		}
		li{
			padding: 0;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li id="li01"><img src="images/01.jpg" alt=""></li>
			<li id="li02"><img src="images/02.jpg" alt=""></li>
			<li id="li03"><img src="images/03.jpg" alt=""></li>
			<li id="li04"><img src="images/04.jpg" alt=""></li>
			<li id="li05"><img src="images/05.jpg" alt=""></li>
		</ul>
	</div>
</body>
<script type="text/javascript">
 	var box = document.getElementById('box');
 	console.log(box);
 	function fn(li_id,bg_num){
 		var obj = document.getElementById(li_id);
 		console.log(obj);
 		obj.onmouseover = function(){
 			box.style.backgroundImage = bg_num;
 		}
 	}
 	fn('li01','url(images/01big.jpg)');
 	fn('li02','url(images/02big.jpg)');
 	fn('li03','url(images/03big.jpg)');
 	fn('li04','url(images/04big.jpg)');
 	fn('li05','url(images/05big.jpg)');
</script>
</html>

使用for循环改进后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标展示</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		img{
			border:0;
			vertical-align:middle;
		}
		ul {
			list-style: none;
		}
		#box {
			width:360px;
			height: 70px;
			padding-top: 360px;
			border: 1px solid #ccc;
			margin: 100px auto;
			background: url(images/01big.jpg);
		}
		#box ul li {
			float: left;
			cursor: pointer;
			border-left: 2px solid #fff;
		}
		li{
			padding: 0;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="images/01.jpg" alt=""></li>
			<li><img src="images/02.jpg" alt=""></li>
			<li><img src="images/03.jpg" alt=""></li>
			<li><img src="images/04.jpg" alt=""></li>
			<li><img src="images/05.jpg" alt=""></li>
		</ul>
	</div>
</body>
<script type="text/javascript">
 	var box = document.getElementById('box');
	var lis = document.getElementsByTagName('li');
 	function fn(li_id,bg_num){
 		var obj = document.getElementById(li_id);
 		// console.log(obj);
 		obj.onmouseover = function(){
 			box.style.backgroundImage = bg_num;
 		}
 	}
	for(var i=1;i<=lis.length;i++){
		// console.log(i);
		lis[i-1].id = 'li0'+i;//给各项li添加id
		fn('li0'+i,'url(images/0'+i+'big.jpg)');
	}
</script>
</html>

具体效果图可见：鼠标展示

网页特效之鼠标展示

猜你喜欢