图片放大镜效果实现-优快云博客


<body onload="init()">
	<div id="snapDiv">
		<img src="Lighthouse.jpg" /> 
		<span id="zoomSpan" style="display: none;"></span>
	        <div id="mask" class="show"></div>
	</div>
	<div style="display: none;" id="viewDiv">
		<img id="bigImg"	src="Lighthouse.jpg" />
	</div>
</body>


#snapDiv { width:300px; height:300px; position:relative; margin:30px;} 
#snapDiv img{width:300px;/* height:300px;*/} 
#snapDiv span { 
	width:100px; height:100px; 
	background:#f00; 
	left:0px;top:0px;
     position:absolute;
     display:none;
     filter:alpha(opacity:20); opacity:0.2;

} 
.show { 
	  width:100%;
	  height:100%;
	  position:absolute;
	  z-index:10;
	  cursor:move;
	  left:0px; top:0px; 
	  filter:alpha(opacity:1); 
	  opacity:0.01; 
	  /*IE 下必须添加background属性或者 border属性，否则不会触发onmouseover事件*/
	  background-color:#fff;
	  } 
#viewDiv {
	width:300px; height:300px;
	border:1px solid #000;
	top:10px;right:10px;
	position:absolute; display:none; overflow:hidden;} 
#viewDiv img { position:absolute;}


function init() {

	var oDiv = document.getElementById('snapDiv');
	var oShow = document.getElementById('mask');
	var oSpan = document.getElementById('zoomSpan');
	var oImg = document.getElementById('bigImg');
    var snapPic = oDiv.getElementsByTagName('img')[0];

    var viewDiv = document.getElementById('viewDiv');

    /*重新计算遮盖层长宽*/
    oShow.style.width = snapPic.width + 'px';
    oShow.style.height = snapPic.height + 'px';


	oShow.onmouseover = function() {
		oSpan.style.display = 'block';
		viewDiv.style.display = 'block';

        /* 重新定义长宽，可以确保视图里面放大的区域是一致的。
         * 如果oSpan的长宽一致，则viewDiv的长宽也一致。即viewDiv.style.width = viewDiv.style.height*/
        viewDiv.style.width = oSpan.offsetWidth*oImg.offsetWidth/snapPic.width + 'px';
        viewDiv.style.height = oSpan.offsetHeight*oImg.offsetHeight/snapPic.height + 'px';

	};
	oShow.onmouseout = function() {
		oSpan.style.display = 'none';
		viewDiv.style.display = 'none';
	};
	oShow.onmousemove = function(ev) {
		var oEvent = ev || event;
		var x = oEvent.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
		var y = oEvent.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;

		if (x < 0) {
			x = 0;
		} else if (x > oShow.offsetWidth - oSpan.offsetWidth) {
			x = oShow.offsetWidth - oSpan.offsetWidth;
		}
		if (y < 0) {
			y = 0;
		} else if (y > oShow.offsetHeight - oSpan.offsetHeight) {
			y = oShow.offsetHeight - oSpan.offsetHeight;
		}

		oSpan.style.left = x + 'px';
		oSpan.style.top = y + 'px';

		var percentX = x / (oShow.offsetWidth - oSpan.offsetWidth);
		var percentY = y / (oShow.offsetHeight - oSpan.offsetHeight);
		oImg.style.left = -percentX
				* (oImg.offsetWidth - viewDiv.offsetWidth) + 'px';
		oImg.style.top = -percentY
				* (oImg.offsetHeight - viewDiv.offsetHeight) + 'px';
	};
}