商城图片放大观看效果(原创)

Html

Css

body {
	transition:all 2s;
}
.wrap {
	width:283px;
	cursor:crosshair;
	overflow:hidden;
	position:relative;
	float:left;
}
.kuang {
	z-index:10;
	position:absolute;
	width:150px;
	height:150px;
	box-shadow:rgb(0,0,0) 0 0 5px;
	left:-999px;
}
.bigbg {
	float:left;
	width:300px;
	height:300px;
	border:1px solid rgba(0,0,0,0.5);
	display:none;
	position:relative;
	overflow:hidden;
}

$(function() {
    let wrap = $('.wrap:eq(0)');
    let kuang = $('.kuang:eq(0)');
    let big = $('.bigbg:eq(0) img');
    let bigbp = $('.bigbg:eq(0)');
    let kuan = wrap.width();
    let gao = wrap.height();
    let width = kuang.width();
    let height = kuang.height();
    let margin = 5;
    wrap.mouseenter(function(e) {
        bigbp.css({
            'display': 'block'
        });
        let x = e.clientX;
        let y = e.clientY;
        let left = this.offsetLeft;
        let top = this.offsetTop;
        if (x >= left && x <= width) {
            if (y >= top && y <= height) {
                kuang.css({
                    'left': 5,
                    'top': 5
                });
            } else if (y <= (gao + top) && y >= (gao + top - height)) {
                kuang.css({
                    'left': 5,
                    'top': gao - height - 5
                });
            }

} else if ((x - left) <= kuan && (x - left) >= (kuan - width)) {
            if (y >= top && y <= height) {
                kuang.css({
                    'left': kuan - width - 5,
                    'top': 5
                });
            } else if (y <= (gao + top) && y >= (gao + top - height)) {
                kuang.css({
                    'left': kuan - width - 5,
                    'top': gao - height - 5
                });
            }
        }
        //kuang.css({'left':e.clientX-width,'top':e.clientY-height+scrollY});

});
    wrap.mousemove(function(e) {
        let x = e.clientX;
        let y = e.clientY;
        let left = this.offsetLeft;
        let top = this.offsetTop;

if (x > (width / 2 + 5 + left) && x < (kuan - width / 2 + left) && y > (height / 2 + 5 + top) && y < (gao - height / 2 - 5 + top)) {
            kuang.css({
                'left': x - width / 2 - 10 + scrollX,
                'top': y - height / 2 - 10 + scrollY
            });
        } else {
            if (x >= (width / 2 + 5 + left) && x <= (kuan - width / 2 + left)) {
                kuang.css({
                    'left': x - width / 2 - 10 + scrollX
                });
            }
            if (y >= (height / 2 + 5 + top) && y <= (gao - height / 2 + top)) {
                kuang.css({
                    'top': y - height / 2 - 10 + scrollY
                });
            }
        }
        let offset = kuang.offset();

big.css({
            'position': 'absolute',
            'left': -2 * (offset.left - 5),
            'top': -2 * (offset.top - 10)
        });
    });
    wrap.mouseleave(function() {
        kuang.css('left', '-999px');
        bigbp.toggle();
    })
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

商城图片放大观看效果(原创)

代码描述：简单实现图片放大观看效果

边框有限制移动的效果，还不太会封装

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

(?? . ??)

相关代码

商城图片放大观看效果(原创)

最新