有问题 遮罩层 闪动
<!DOCTYPE html>
<html>
<head>
<title>magnifier</title>
<style type="text/css">
*{margin: 0;padding:0;}
#sm{position:absolute;top:10px;left: 10px;border: 1px solid red;font-size: 0}
#big{position: absolute;top: 10px;left: 412px;border: 1px solid red;width: 400px;height:225px;overflow:hidden;font-size: 0;}
#blank{width:130px;height:90px;background:rgba(0,0,0,0.3);display: none;position: absolute;z-index: 9;}
</style>
<script type="text/javascript">
window.onload = function(){
var msm = document.getElementById('sm');
var big = document.getElementById('big');
var mark = document.getElementById("blank");
msm.onmousemove = function(event){
event = event || window.event;
mark.style.display = 'block'
mark.style.left = parseInt(event.offsetX) - mark.offsetWidth/2+ 'px'
mark.style.top = parseInt(event.offsetY) - mark.offsetHeight/2 + 'px'
}
}
</script>
</head>
<body>
<div id="sm">
<div id="blank"></div>
<img src="img/su.jpg">
</div>
<div id="big">
<img src="img/big.jpg">
</div>
</body>
</html>
鼠标在图片上移动时 遮罩层一闪一闪的
