放大镜效果之js

HTML代码：

div.box>div#left+div#buttom+div#right

div#left>img

div#buttom>div.small>img

CSS代码：

        .box{
            position: relative;
        }
        #left{
            width:310px;
            height:310px;
            border: 1px solid blueviolet;
        }
        #buttom{
            width: 310px;
            height: 40px;
            margin-top: 10px;
        }
        #buttom .small{
            border: 1px solid wheat;
            float: left;
            margin-right: 5px;
        }
        #right{
            width: 400px;
            height: 310px;;
            position: absolute;
            top:;
            left:320px;
            border: 1px solid #ccc;
            display: none;
            overflow: hidden;
        }
        #right img{
            position: absolute;
            top:;
            left:;
        }

JS代码：

     <script>
         function $(id){
             return document.getElementById(id);
         }
         window.onload = function () {
             var left = $('left');
             var button = $('buttom');
             var right = $('right');
             button.onmouseover = function (e) {
                 var e = e||window.event;//兼容事件
                 var imgobj = e.srcElement|| e.target; //获得目标事件源，即图片 ,ie下srcElement,火狐下target
                 if(imgobj.nodeName == 'IMG'){  //当目标事件源是图片时
 //                    alert(imgobj.src);
                     var names = imgobj.src; //获得图片路径
                     console.log(names);
                     console.log(names.lastIndexOf('/'));//获得/的角标位
                     console.log(names.substring(names.lastIndexOf('/'))); //从角标位开始截至最后为图片名
                     var imgOldName = names.substring(names.lastIndexOf('/'));
                     var imgNewName = imgOldName.replace('1','2'); // 从改名来换路径
                     console.log(imgNewName);
                     left.innerHTML = '<img src=img'+imgNewName +'>';
                 }
             };
             //右边图片显示逻辑
             left.onmouseover = function () {
                 right.style.display ='block';
                 var leftimg = left.getElementsByTagName('img')[0];
                 var names = leftimg.src;
                 var imgoldname = names.substring(names.lastIndexOf('/'));
                 var imgNewName = imgoldname.replace('2','3');
                 right.innerHTML = "<img src=img"+imgNewName+">";
                 var rightImg = right.getElementsByTagName('img')[0];
                 //添加移动事件
                 this.onmousemove = function (e) {
                     var e = e||window.event;
                     var l = e.offsetX|| e.layerX; //相对于事件源位置的兼容写法
                     var r = e.offsetY|| e.layerY;
                     //根据比例来定位大图坐标
                     rightImg.style.left = l/left.offsetWidth*(right.offsetWidth-rightImg.offsetWidth)+"px";
                     rightImg.style.top = r/left.offsetHeight*(right.offsetHeight-rightImg.offsetHeight)+"px";
                 }
             }
             //离开事件
             left.onmouseout = function () {
                 right.style.display = 'none';
             }
         }
     </script>