10分钟实现图片放大镜效果

少废话 先上效果图

代码如下
HTML部分

CSS部分
#left {
width: 300px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid black;
}
#left img {
width: 100%;
height: 100%;
}
#mark {
display: none;
width: 100px;
height: 100px;
background-color: white;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
}
#right {
display: none;
width: 300px;
height: 300px;
position: absolute;
left: 500px;
top: 100px;
border: 1px solid black;
overflow: hidden;
}
#right img {
width: 900px;
height: 600px;
position: absolute;
left: 0;
top: 0;
}

JS部分
window.onload =function(){
var oLeft = document.getElementById(“left”);
var oRight = document.getElementById(“right”);
var oMark = document.getElementById(“mark”);
var oRightImg =oRight.getElementsByTagName(“img”)[0];

 oLeft.onmouseover = function(){
     oMark.style.display = 'block';
     oRight.style.display ='block';
 }
 oLeft.onmouseout = function(){
    oMark.style.display = 'none';
    oRight.style.display ='none';
}
oLeft.onmousemove = function(ev){
    var e = ev || window.event;
    var l = e.clientX - oLeft.offsetLeft - 50;
    var t = e.clientY - oLeft.offsetTop - 50;
    if(l<=0){
        l = 0;
    }
    if(l>=200){
        l = 200;
    }
    if(t<=0){
        t = 0;
    }
    if(t>=100){
        t = 100;
    }
    oMark.style.left = l + 'px';
    oMark.style.top = t + 'px';

    oRightImg.style.left = l * -3 +'px';
    oRightImg.style.top = t * -3 +'px';
}

}