js——放大镜效果

放大镜公式: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 = '';
        };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值