JavaScript实现放大镜效果

HTML布局：

<div id="parent">    <div id="left">        <img id="img_350" src="./images_350/f14b276feb925fbfeb8a59e916ba5045.jpg">        <div id = "inner"></div>    </div>    <div id="right">        <img id="img_800" src="./images_800/f14b276feb925fbfeb8a59e916ba5045.jpg">    </div>    <ul id="ul">        <li><img src="./images_50/f14b276feb925fbfeb8a59e916ba5045.jpg"></li>        <li><img src="./images_50/cbd2bbb835886ebde917fe1fc553c034.jpg"></li>        <li><img src="./images_50/e32f5c3cea966515c9aaea991517cea2.jpg"></li>    </ul></div>

CSS：

body{    margin: 100px;}ul {    margin: 10px 0 0 0;    padding: 0;    display: block;    height: 100px;    list-style: none;}div {    margin: 0;    padding: 0;}#parent {    width: 800px;    height: 800px;}#parent li {    display: inline-block;    width: 50px;    height: 50px;    margin-right: 10px;    border: 1px solid #cccccc;}#parent li:hover {    cursor: pointer;}#left {    width: 350px;    height: 350px;    position: relative;    border: 1px solid #cccccc;    display: inline-block;}#right {    width: 350px;    height: 350px;    border: 1px solid #cccccc;    display: inline-block;    /*溢出部分隐藏*/    overflow: hidden;    display: none;    position: relative;}#inner {    /*     *与倍率有关     *放大镜:小图 = 小图:大图    */    width: 153.125957px;    height: 153.125957px;    position: absolute;    top: 0;    left: 0;    background-color: blue;    opacity: 0.4;    /*开始时隐藏*/    display: none;}#img_800 {    position: absolute;    top: 0;    left: 0;}

JS：

window.onload = function() {    //大图    var img_800 = document.getElementById('img_800');    //小图    var img_350 = document.getElementById('img_350');    //小图父元素    var left = document.getElementById('left');    //放大镜    var inner = document.getElementById('inner');    //大图父元素    var right = document.getElementById('right');    //图片列表，用作切换图片    var ul = document.getElementById('ul');    //切换图片    setEvent(ul, 'click', function(event){        if(event.target.nodeName === "IMG") {            var image_350 = "./images_350/" + event.target.src.substring(event.target.src.lastIndexOf("/") + 1);            var image_800 = "./images_800/" + event.target.src.substring(event.target.src.lastIndexOf("/") + 1);            img_350.src = image_350;            img_800.src = image_800;        }    });    setEvent(left, 'mousemove', function(e){        var event = e || window.event;        //鼠标移入时显示大图和放大镜        inner.style['display'] = "inline-block";        right.style['display'] = 'inline-block';        inner.style['cursor'] = 'crosshair';        //获取滚动距离，clientX和clientY与浏览器滚动与否无关，所以要获取真正的光标坐标应当加上滚动值        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;        //计算放大镜的相对于父元素的left和top值，光标应处于放大镜中间，所以多减了1/2的放大镜尺寸        var x = ((event.clientX + scrollLeft) - left.offsetLeft) - inner.offsetWidth/2;        var y = ((event.clientY + scrollTop) - left.offsetTop) -  inner.offsetHeight/2;        //越界处理        if(x < 0) {            x = 0;        }else if(x > left.offsetWidth - inner.offsetWidth) {            x = left.offsetWidth - inner.offsetWidth        }        if(y < 0) {            y = 0;        }else if(y > left.offsetHeight - inner.offsetHeight) {            y = left.offsetHeight - inner.offsetHeight;        }        var scope = 800/350;        //大图相对于父元素的移动方向与放大镜的移动方向相反（溢出部分隐藏了的，如果移动方向相同，显示的是空白部分）        var img_x = -(x * scope);        var img_y = -(y * scope);        inner.style['left'] = x + "px";        inner.style['top'] = y + "px";        img_800.style['left'] = img_x + "px";        img_800.style['top'] = img_y + "px";    });    setEvent(left, 'mouseout', function(event){        //当鼠标移出时隐藏光标和放大图        inner.style['display'] = "none";        right.style['display'] = 'none';    });    function setEvent(dom, event, fun) {        if(dom.addEventListener) {            dom.addEventListener(event, fun, false);        }else if(dom.attachEvent) {            //兼容IE8及以下            dom.attachEvent("on" + event, fun);        }else {            dom["on" + event] = fun;        }    }}

效果图：