图片放大效果

练习一:中心放大

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>中心放大</title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 300px;
			position: relative;
			background: #eee;
			left: 300px;
			top: 300px;
		}
		#div2{
			width: 200px;
			height: 200px;
			position: absolute;
			background: red;
			left: 300px;
			top: 300px;
		}
	</style>
	<script type="text/javascript" src="move.js"></script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>

	<script type="text/javascript">
	var div1 = document.getElementById('div1');
	var div2 = document.getElementById('div2');

	div1.onmouseover = function(){
		startMove(div1,{width:200,height:200,marginTop:-50,marginLeft:-50})
	}
	div1.onmouseout = function(){
		startMove(div1,{width:200,height:200,marginTop:0,marginLeft:0})
	}
	</script>
</body>
</html>

练习二:

<!DOCTYPE html>
<html>
<head>
	<title>案例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="move.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#ul1{
			width: 366px;
			margin: auto;
			position: relative;
			margin-top: 50px;
		}
		#ul1 li{
			list-style: none;
			width: 100px;
			height: 100px;
			background: #ccc;
			border: 1px solid black;
			float: left;
			margin: 10px;
		}
		#ul1 li img{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>

<ul id="ul1">
	<li><img src="img/1.jpg" alt=""></li>
	<li><img src="img/2.jpg" alt=""></li>
	<li><img src="img/3.jpg" alt=""></li>
	<li><img src="img/4.jpg" alt=""></li>
	<li><img src="img/5.jpg" alt=""></li>
	<li><img src="img/6.jpg" alt=""></li>
	<li><img src="img/7.jpg" alt=""></li>
	<li><img src="img/1.jpg" alt=""></li>
	<li><img src="img/2.jpg" alt=""></li>
</ul>

<script type="text/javascript">
	var oul = document.getElementById('ul1');
	var list = oul.getElementsByTagName('li');

	var iMinZindex = 2;
	// 布局转换
	for (var i = 0; i < list.length; i++) {
		// list[i].innerHTML = "left:"+list[i].offsetLeft+",top:"+list[i].offsetTop;
		list[i].style.left = list[i].offsetLeft + "px";
		list[i].style.top = list[i].offsetTop + "px";
	}
	for (var i = 0; i < list.length; i++) {
		list[i].style.position = "absolute";
		list[i].style.margin = "0";
	}

	// 添加事件
	for (var i = 0; i < list.length; i++) {
		list[i].onmouseover = function(){
			this.style.zIndex = iMinZindex ++;
			startMove(this, {width: 200, height: 200, marginLeft:-50, marginTop:-50})
		}
		list[i].onmouseout = function(){
			startMove(this, {width: 100, height: 100, marginLeft:0, marginTop:0})
		}
	}

</script>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 图片放大效果

赞 (1)
分享到:更多 ()

发表评论 0