jq放大镜

最新推荐文章于 2023-01-14 21:47:59 发布

前端你别闹~

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量682

点赞数 3

本文链接：https://blog.csdn.net/ASLlife/article/details/89513509

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery放大镜/title>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<style>
 * {
	margin:0;
	padding:0;
}
.small_box {
	width:250px;
	height:250px;
	margin-left:10px;
	margin-top:10px;
	position:relative;
}
.small_box img {
	width:250px;
	height:250px;
}
.small_box .mask {
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	opacity:0;
	z-index:2;
	cursor:move;
}
.small_box .float_layer {
	position:absolute;
	width:100px;
	height:100px;
	background:rgba(0,0,0,0.5);
	display:none;
}
.big_box {
	position:absolute;
	left:200px;
	top:10px;
	width:250px;
	height:250px;
	overflow:hidden;
	display:none;
}
.big_box img {
	position:absolute;
}
</style>
</head>
<body>
<div class="small_box">
    <span class="mask"></span>
    <span class="float_layer"></span>
    <img src="image/01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.png">
</div>
<div class="big_box">
    <img src="image/01283a598c19b90000002129618e9d.jpg@1280w_1l_2o_100sh.png">
</div>

<script>
$(".mask").mouseover(function() {//鼠标移入事件，让放大镜和放大区显示！
    $(".float_layer").show()
    $(".big_box").show()
})
$(".mask").mouseout(function() {//鼠标移出后，放大镜和放大区隐藏
    $(".float_layer").hide()
    $(".big_box").hide()
})



$(".mask").mousemove(function(e) {
    //获得鼠标移上去 mask盒子的实际移动距离  鼠标横纵坐标 - 盒子到坐上边界距离 - 盒子的实际宽高距离的二分之一
    var l = e.pageX - $(".small_box").offset().left - ($(".float_layer").width() / 2)
    var t = e.pageY - $(".small_box").offset().left - ($(".float_layer").height() / 2)
    //防止小盒子移出边界
    if (l < 0) {
        l = 0
    }
    if (l > $(this).width() - $(".float_layer").width()) {
        l = $(this).width() - $(".float_layer").width()
    }
    if (t < 0) {
        t = 0
    }
    if (t > $(this).height() - $(".float_layer").height()) {
        t = $(this).height() - $(".float_layer").height()
    }

    $(".float_layer").css({
        "left": l,
        "top": t
    })
    //求出实际移动距离/小盒子最大移动距离的比例值
    var pX = l / ($(".mask").width() - $(".float_layer").width())
    var pY = t / ($(".mask").height() - $(".float_layer").height())
    $(".big_box img").css({
        //获得右边大盒子与大图片的差值 * 比例 达到放大镜效果
        "left": -pX * ($(".big_box img").width() - $(".big_box").width()),
        "top": -pY * ($(".big_box img").height() - $(".big_box").height())
    })



})
</script>

</body>
</html>