js放大镜

css

<style>
	#box{position:relative;}
	.small_pic{width:360px;height:640px;}
	.small_pic img{width:100%;height:100%;}
	.small_pic .slider{display:none;width:180px;height:320px;position:absolute;background:rgba(255,255,255,.3);cursor:move;}
	.big_pic{display:none;position:absolute;width:360px;height:640px;top:0px;left:370px;overflow:hidden;border:1px solid #666;}
	.big_pic img{position:absolute;top:0;left:0;}
</style>

html

<div id="box">
	<div class="small_pic">
		<span class="slider"></span>
		<img src="img/beaut.jpg" alt="" />
	</div>
	<div class="big_pic">
		<img src="img/beaut.jpg" width="720" height="1280" alt="" />
	</div>
</div>

js

<script>
			window.onload=function(){
				var box=document.getElementById("box");
				var smallPic=document.getElementsByClassName("small_pic")[0];
				var slider=document.getElementsByClassName("slider")[0];
				var bigPic=document.getElementsByClassName("big_pic")[0];
				var bigImg=bigPic.getElementsByTagName("img")[0];
				//移出
				smallPic.onmouseout=function(){
					slider.style.display="none";
					bigPic.style.display="none";
				}
				//移入
				smallPic.onmousemove=function(event){
					slider.style.display="block";
					bigPic.style.display="block";
					var left=event.clientX-slider.offsetWidth/2;
					var top=event.clientY-slider.offsetHeight/2;
					if(left<0){
						left=0;
					}else if(left>(smallPic.offsetWidth-slider.offsetWidth)){
						left=smallPic.offsetWidth-slider.offsetWidth;
					}
					if(top<0){
						top=0;
					}else if(top>(smallPic.offsetHeight-slider.offsetHeight)){
						top=smallPic.offsetHeight-slider.offsetHeight;
					}
					slider.style.left=left+'px';
					slider.style.top=top+'px';
					bigImg.style.left=-(left*2)+'px';//计算比例
					bigImg.style.top=-(top*2)+'px';
					
				}
				
			}
		</script>