jquery常见特效之放大镜

演示效果：
代码：
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
	<style type="text/css">
		*{padding: 0; margin: 0;}		
		#box{
			width: 700px;
			margin: 10px auto;
		}
		.left,.right{float: left;}
		.bottom>div{
			float: left;
			margin-left: 4px;
		}
		.right{
			margin-left: 50px;
			width: 300px;
			height: 300px;
			background: #ccc;
			overflow: hidden;
			display: none;
		}
		.mouseOn{
			background-color: orange;
			padding: 3px;
		}
		.top{position: relative;}
		#inner{
			background-color: blue;
			opacity: 0.3;
			width: 60px;
			height: 60px;
			position: absolute;
			left: 0px;
			top: 0px;
			display: none;
		}
		.right{position: relative;}
		.right img{
			position: absolute;
		}
	</style>	
</head>
<body>
	<div id="box">
		<div class="left">
			<div class="top">	<!--左侧图片区-->
				<img src="images/1.jpg" width="300px" height="300px">
				<div id="inner"></div>
			</div>		
			<div class="bottom">
				<div><img src="images/1.jpg" width="55px" height="40px" class="mouseOn"></div>
				<div><img src="images/6.jpg" width="55px" height="40px"></div>
				<div><img src="images/7.jpg" width="55px" height="40px"></div>
				<div><img src="images/8.jpg" width="55px" height="40px"></div>
				<div><img src="images/9.jpg" width="55px" height="40px"></div>				
			</div>
		</div>
		<div class="right"><img src="images/1.jpg" width="1500px" height="1500px"></div>
	</div>
	<script type="text/javascript">
		$(".bottom").find('img').mouseover(function(event) {
			/* Act on the event */
			$(".bottom img").removeClass("mouseOn")			//增加橙色边框
			$(this).addClass("mouseOn").siblings().removeClass("mouseOn");				//删除其它橙色边框
			$(".top img").attr('src', $(this).attr("src"));					//将上方大图改变
			$(".right img").attr('src', $(this).attr("src"));				//改变右方大图
		});

		$(".top").mousemove(function(e){	

			$("#inner").show();				//显示蓝色小方块
			$(".right").show();				//显示右方放大图

			var left = e.pageX - $("#inner").width()/2 - $(".top").offset().left;  //小方块left属性 
			var top = e.pageY - $("#inner").height()/2 - $(".top").offset().top;  //小方块top属性 			
			var max = $(".top").width()-$("#inner").width();					//小方块最大移动距离
			//防止小方块越界
			if(left < 0)
				left = 0;				
			if(left > max)
				left = max;
			if(top < 0)
				top = 0;
			if(top > max)	
				top = max;

			//移动小方块
			$("#inner").css({
				"left": left,
				"top": top
			})	
			//移动放大图，5倍放大比例
			$(".right img").css({
				"left": -5*left,				
				"top": -5*top
			})
		}).mouseleave(function(){
			$(".right").hide();
			$("#inner").hide();
		})
	</script>
</body>
</html>
jquery常见特效之放大镜

猜你喜欢
