It is run under my sunset, electricity end PC's Web site details page for larger image effects to achieve

When the details page when browsing larger picture still can not see the details of the goods, the effect achieved hover over the larger picture, a magnifying glass effect in the larger picture appears on the right side and the right side to change the big picture of the position of the mouse It displays content, and the same contents hover position the magnifying glass. The effects achieved Pictured: add a larger picture mouse event listener, the listener first enters the mouse event, a mask layer on a large image in the mouse event listener, and an enlarged image display area to be seen. Move the mouse event listener, first obtain the relevant coordinates, obtaining the relative position of the large map on the page, and then get the mouse position relative to the location of the page, minus the former using the latter coordinates relative to the coordinates of the mouse to get the big picture. Using the coordinates of the mouse minus the half width of the mask layer, the mask layer so as to obtain the position shown. Mask layer using a coordinate value obtained by multiplying the magnification of the magnifying glass in the image coordinate values, amplification value is set to 2 here. According to these obtained coordinates of the coordinate value of the mask layer, and the coordinates of the magnifying glass image area. Finally, add event listeners mouse leave, hides the mask layer, and a magnifying glass when the mouse leaves the larger picture. Specific implementation code:

---

//magnify
        //放大镜效果，首先要获取商品大图div的jQuery对象
        var $imgWrap=$('.detail-img-main')
        //监听鼠标进入事件
        $imgWrap.mouseenter(function (e) {
            //#imgLoc为遮罩层，使其显示
            $('#imgLoc').css('display','block')
            //.mainfyImg即放大镜显示元素，也使其显示
            $('.manifyImg').css('display','block')
            
        })
        //监听鼠标离开事件
        $imgWrap.mouseleave(function (e) {
            //当鼠标离开时，使遮罩层隐藏
            $('#imgLoc').css('display','none')
            //当鼠标离开时，使放大镜隐藏
            $('.manifyImg').css('display','none')
        })
        //监听鼠标的移动事件
        $imgWrap.mousemove(function (e) {
            //得到商品大图的相对于页面的横坐标
            var imgX=document.getElementById('imgMainWrap').getBoundingClientRect().left
            //得到商品大图的相对于页面的纵坐标
            var imgY=document.getElementById('imgMainWrap').getBoundingClientRect().top
            //得到鼠标相对于商品大图的横坐标，使用鼠标相对于页面的横坐标减去商品大图相对于页面的坐标
            var cursorX=e.clientX-imgX
            //得到鼠标相对于商品大图的纵坐标
            var cursorY=e.clientY-imgY
            //得到遮罩层的坐标，106是遮罩层边长的一半
            var maskX=(cursorX-106)+'px'
            var maskY=(cursorY-106)+'px'
            //保证遮罩层是完整的
            if (cursorX<106) {
                maskX='0px'
            }else if (cursorX>310) {
                maskX='200px'
            }
            if (cursorY<106) {
                maskY='0px'
            }else if (cursorY>310) {
                maskY='200px'
            }
            //计算得到放大镜中图片的显示位置
            var maginfyX=-parseInt(maskX)*2+'px'
            var maginfyY=-parseInt(maskY)*2+'px'
            //设置遮罩层的位置
            $('#imgLoc').css('left',maskX)
            $('#imgLoc').css('top',maskY)
            //设置放大镜中图片的位置
            $('.manifyImg img').css('left',maginfyX)
            $('.manifyImg img').css('top',maginfyY)
        })    

Here is the HTML structure
div.detail-img

            a(href='javascript:;').detail-img-main#imgMainWrap
                img(src='./images/detail/band/b1.jpg')#imgMain
                div#imgLoc
            div.manifyImg
                img(src='./images/detail/band/b1.jpg')

请输入代码

View full project can go to my GitHub , welcome to download, questions and concerns Kazakhstan.