图片局部放大镜


<!--
	效果：当鼠标移到小图片上面时显示放大镜 和 放大的局部图片
	原理：
		1、放大镜是一个绝对定位的半透明的div、通过样式left和top限控制放大镜的移动（只能在小图片容器内移动）
		2、放大后的局部图片的大小跟放大镜的大小是成比例的、小图片和大图片的比例也是一样的
		3、通过设置放大后显示图片的容器的宽高再把溢出隐藏就可以显示放大的局部图片
		4、放大镜移动的时候、大图片容器的滚动条也跟着滚动（按照比例滚动）
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>图片局部放大</title>
		<style>
			*{margin:0px;padding:0px;}
			#small{position:relative;}
			#small div{display:none;cursor:move;position:absolute;left:0px;top:0px;background:blue;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2;}
			#big{position:absolute;top:0px;overflow:hidden;}/*把溢出隐藏*/
		</style>
		<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
		<script>
			var ratio=3; //放大比例
			var small_img_width=500; //小图片的宽
			var small_img_height=287; //小图片的高
			var big_width=600;  //放大后的局部图片的宽
			var big_height=400; //放大后的局部图片的高
			function init(){
				//设置好小图片和小图片的容器的宽度和宽度、容器如果不设置宽度是默认100%的
				$("#small,#small img").css({"width":small_img_width+"px","height":small_img_height+"px"});
				//根据放大后的局部图片的宽高和放大比例设置放大镜的宽高
				$("#small div").css({"width":big_width/ratio+"px","height":big_height/ratio+"px"});
				//设置好放大后的局部图片的宽高
				$("#big").css({"width":big_width+"px","height":big_height+"px","left":small_img_width+10+"px"})
				//根据放大比例和小图片的宽高设置大图片的宽高
				$("#big img").css({"width": small_img_width * ratio + "px","height": small_img_height * ratio + "px"})
			}
			$(function(){
				init();
				$("#small").mousemove(function(e){
					//放大镜的left=鼠标的横坐标-放大镜自身的一半宽度（因为需要鼠标在放大镜的中间）
					var div_x=e.pageX-$("#small div").width()/2;
					//放大镜的top=鼠标的纵坐标-放大镜自身的一半高度（因为需要鼠标在放大镜的中间）
					var div_y=e.pageY-$("#small div").height()/2;
					//放大镜的left允许值=小图片的容器宽度-放大镜自身的宽度
					var div_border_x=$("#small").width()-$("#small div").width();
					//放大镜的top允许值=小图片的容器高度-放大镜自身的高度
					var div_border_y=$("#small").height()-$("#small div").height();
					//如果放大镜的top的允许值<0,那么top设为0
					if (div_y < 0) {
						$("#small div").css("top", "0px");
					}
					//如果放大镜的top>放大镜的top的允许值,那么top设为放大镜允许的最大的top值
					else if (div_y>div_border_y) {
						$("#small div").css("top", div_border_y+"px");
					}
					//如果放大镜的top不超出边界、直接使用放大镜的div_y
					else {
						$("#small div").css("top", div_y + "px");
					}
					if (div_x < 0) {
						$("#small div").css("left", "0px");
					}
					else if (div_x>div_border_x) {
						$("#small div").css("left", div_border_x+"px");
					}
					else {
						$("#small div").css("left", div_x + "px");
					}
					//大图片局部容器的滚动条根据放大镜的top和放大比例改变滚动的高度
					$("#big").scrollTop(parseInt($("#small div").css("top"))*ratio);
					$("#big").scrollLeft(parseInt($("#small div").css("left"))*ratio);
				});
				//当鼠标移到小图片容器上面触发的事件
				$("#small").hover(function(e){
					//显示放大镜
					$("#small div").show();
					//把大图片的路径设为小图片的路径
					$("#big img").attr("src",$("#small img").attr("src"));
					//显示大图片局部容器
					$("#big").show();
				},function(){
					//当鼠标移开小图片容器后把放大镜和大图片局部容器隐藏
					$("#small div").hide();
					$("#big").hide();
				});
			});
		</script>
	</head>
	<body>
		<div id="small">
			<img src="imgs/混世小色医2.png"/>
			<div></div>
		</div>
		<div id="big">
				<img/>
		</div>
	</body>
</html>
猜你喜欢
