放大镜的效果

css:

			*{
				margin: 0;
				padding: 0;
			}
			.min_img{
				/*1920 x 1080*/
				width: 480px;
				height: 270px;
				background-image: url(img/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;
				
			}

html:

		<div class="min_img">
			<div class="fdj"></div>
		</div>
		<div class="max_img">
			<img src="img/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 是div在可视区域X轴上距左的距离
			l=e.clientX-ofdj.offsetWidth/2;
			// t 是div在可视区域Y轴上距上的距离
			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;
		}
		//   l  是鼠标在可视区域的坐标位置
//			document.documentElement.clientWidth 是可视区域的宽
//			odiv.offsetWidth					 是div元素自身的宽
//			如果是div在可视区域X轴上距左的距离>可视区域的宽减去div元素自身的宽
//			就让div在可视区域X轴上距左的距离=可视区域的宽减去div元素自身的宽
		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>