放大镜效果之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:0;
            left:320px;
            border: 1px solid #ccc;
            display: none;
            overflow: hidden;
        }
        #right img{
            position: absolute;
            top:0;
            left:0;
        }

 

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>