jQ 放大镜效果
2020-05-03 本文已影响0人
lessonSam
该项目可以直接使用 在宽高读取都是没有写死的 可以直接用，也可以写成插件也是没问题的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.js"></script>
<style>
.small {
position: absolute;
top: 100px;
left: 100px;
width: 250px;
height: 250px;
border: 1px solid red;
margin-bottom: 30px;
}
.small img {
width: 100%;
height: 100%;
}
.big {
position: relative;
display: none;
top: 100px;
left: 500px;
/* 这个宽高是蒙版的4倍· */
width: 400px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
.big img {
width: 1000px;
height: 1000px;
position: absolute;
}
.mark {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<!-- 布局 -->
<!-- 小图 -->
<div class="small">
<img src="../五星评价/img/a.jpg" alt="" srcset="" />
<div class="mark"></div>
</div>
<!-- 大图 -->
<div class="big">
<img src="../五星评价/img/a.jpg" alt="" srcset="" />
</div>
<div></div>
<script>
$(function () {
$('.small')
.mouseenter(function () {
$('.mark,.big').show();
})
.mouseleave(function () {
$('.mark, .big').hide();
})
.mousemove(function (e) {
var l = e.pageX - $(this).offset().left - $('.mark').width() / 2;
var t = e.pageY - $(this).offset().top - $('.mark').height() / 2;
// 边界判断
// 水平方向 left 方向是不能小于0 right 方向是不能超过small -mark 的宽度
l =
l <= 0
? 0
: l >= $('.small').width() - $('.mark').width()
? $('.small').width() - $('.mark').width()
: l;
// 垂直方向 同垂直方向道理相同
t =
t <= 0
? 0
: t >= $('.small').height() - $('.mark').height()
? $('.small').height() - $('.mark').height()
: t;
// 改变遮罩层的位置
$('.mark').css({
left: l,
top: t,
});
// 同时改变放大图片的位置
$('.big img').css({
left: -4 * l,
top: -4 * t,
});
});
});
</script>
</body>
</html>
