js放大镜

js放大镜

css代码 :

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.min_img{
		/*1920 x 1080*/
		width: 480px;
		height: 270px;
		background-image: url(images/large.jpg);
		background-size: 100%;
		position: relative;
	}
	.fdj{
		width: 140px;
		height: 100px;
		background: #ccc;
		opacity: 0.4;
		position: absolute;
		display: none;
	}
	.max_img{
		/*1920 x 1080*/
		width: 480px;
		height: 270px;
		overflow: hidden;
		border: 1px solid red;
		display: none;
	}
</style>

html代码 :

	<div class="min_img">
		<div class="fdj"></div>
	</div>
	<div class="max_img">
		<img src="images/large.jpg"/>
	</div>

js代码 :

<script type="text/javascript">
	var ofdj=document.getElementsByClassName('fdj')[0];
	var omin_img=document.getElementsByClassName('min_img')[0];
	var omax_img=document.getElementsByClassName('max_img')[0];
	document.onmousemove=function(e){
		var e=e||window.event;
		l=e.clientX-ofdj.offsetWidth/2;
		t=e.clientY-ofdj.offsetHeight/2;
		if(l<0){
			l=0;
		}
		if(t<0){
			t=0;
		}
		if(l>omin_img.offsetWidth-ofdj.offsetWidth){
			l=omin_img.offsetWidth-ofdj.offsetWidth;
		}
		if(t>omin_img.offsetHeight-ofdj.offsetHeight){
			t=omin_img.offsetHeight-ofdj.offsetHeight;
		}
		ofdj.style.left=l+'px';
		ofdj.style.top=t+'px';
		omax_img.scrollLeft=l*4;
		omax_img.scrollTop=t*4;
	}

	omin_img.onmouseover=function(){
		ofdj.style.display='block';
		omax_img.style.display='block'
	}
	omin_img.onmouseout=function(){
		ofdj.style.display='none';
		omax_img.style.display='none';
	}
</script>

在浏览器展示 :

需要用到的图片 :