js——放大镜效果

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82117587

放大镜公式：bgx=( smx * bgi ) / smi；

        //in
        smb.onmouseover = function () {
            mask.style.display = 'block';
            bgb.style.display = 'block';
            //move
            smb.onmousemove = function (en) {
                var e = en || window.event;
                //get
                var x = e.clientX - smb.offsetParent.offsetLeft - mask.offsetWidth * 0.5;
                var y = e.clientY - smb.offsetParent.offsetTop - mask.offsetHeight * 0.5;
                //check
                if (x <= 0) {
                    x = 0;
                } else if (x >= smb.offsetWidth - mask.offsetWidth) {
                    x = 280;
                }
                if (y <= 0) {
                    y = 0;
                } else if (y >= smb.offsetHeight - mask.offsetHeight) {
                    y = 175;
                }
                //move
                mask.style.left = x + 'px';
                mask.style.top = y + 'px';
                //bgi
                bgi.style.left=-x/(smb.offsetWidth/bgi.offsetWidth)+'px';
                bgi.style.top=-y/(smb.offsetHeight/bgi.offsetHeight)+'px';
            }
        };
        //out
        smb.onmouseout = function () {
            mask.style.display = '';
            bgb.style.display = '';
        };