<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大插件 放大镜</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.js"></script>
<style>
/*背景不够清晰就把size 100% 100%注释掉*/
body {
height: 2999px;
background: url('http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqQVUMFnIAsxIyBU3xC4FozaO*4v2ti3nWWAawJqVQPIwPNeWdnbRVMtN*RKuayw9zKOaVN9diptWMCCFJvX2aSc!/b&ek=1&kp=1&pt=0&bo=OARTBjgEUwYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=60-4-3&rf=viewer_311') no-repeat;
/*
background: url('http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqYKSVFjYrMNDGMbUzHQRyWBolpNCoRgKghR9zO3Htd1UnF67knFdm6GLbaC5k8FwxWMJ7tGf86cp32I7tcX20IE!/b&ek=1&kp=1&pt=0&bo=OARTBjgEUwYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=50-1-1&rf=viewer_311') no-repeat; */
/*
background: url('http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqeLwGapdIZ8D7C4S4MpcHpTk*L7o8l2obz*XyXD32rBHuB2q2hzmlLvoHBdIiBKaMSs7kli21CC2SM6XakPTqfQ!/b&ek=1&kp=1&pt=0&bo=OARTBjgEUwYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=50-1-1&rf=viewer_311') no-repeat; */
/* background: url('http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqUXhQaXxJh*AcuKmb3xoLqylv6TUHq3YE6d3A87spQv.MzWjgdSCO1QZMpKR5unouLmxXms1aKLX6j6ljZ6g3Os!/b&ek=1&kp=1&pt=0&bo=OARUBjgEVAYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=50-1-1&rf=viewer_311') no-repeat; */
/* background: url('http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqbwTQ07FnFBHKLKbLwbeS0qdKuA5glJsf0kPZde4OJcJRx3oCig4N9CGNV*tED*6qWSp4kmu4e*Y0*AEphZHfIg!/b&ek=1&kp=1&pt=0&bo=OARUBjgEVAYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=50-1-1&rf=viewer_311') no-repeat; */
/* background: url('http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqbdzxn7T8ov2EfpBQjA32AubJ*BEyML4gBr9y7mYeViJc1.juGBbehRlcD0WEWjBPkWai98QjVMT*iC6tjLerBg!/b&ek=1&kp=1&pt=0&bo=OARUBjgEVAYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=50-1-1&rf=viewer_311') no-repeat; */
background-position: center center;
background-size: 100% 100%;
}
* {
margin: 0;
padding: 0;
}
.left {
float: left;
}
.wrap {
overflow: hidden;
margin: 50px 0 0 50px;
position: relative;
}
.wrap img {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
.wrap span {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.3);
display: none;
}
.zoom {
width: 500px;
height: 500px;
border: 1px dashed #ccc;
background: url("http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqQVUMFnIAsxIyBU3xC4FozaO*4v2ti3nWWAawJqVQPIwPNeWdnbRVMtN*RKuayw9zKOaVN9diptWMCCFJvX2aSc!/b&ek=1&kp=1&pt=0&bo=OARTBjgEUwYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=60-4-3&rf=viewer_311") no-repeat;
background-position: center center;
background-size: 200% 200%;
margin-top: 50px;
/* display: none; */
}
</style>
</head>
<body>
<!-- 如果放大镜效果不生效，请把图片背景地址改为本地图片地址 -->
<div class="wrap left">
<img src="http://a1.qpic.cn/psc?/V105nP9x1HSihM/bqQfVz5yrrGYSXMvKr.cqQVUMFnIAsxIyBU3xC4FozaO*4v2ti3nWWAawJqVQPIwPNeWdnbRVMtN*RKuayw9zKOaVN9diptWMCCFJvX2aSc!/b&ek=1&kp=1&pt=0&bo=OARTBjgEUwYRECc!&tl=1&vuin=878460364&tm=1600268400&sce=60-4-3&rf=viewer_311"
alt="略缩图" />
<span></span>
</div>
<div class="zoom left"></div>
<script>
(function ($) {
$.fn.zoom = function () {
var img = $(this).find("img");
var span = $(this).find("span");
var zoom = $(".zoom");
//获取略缩图相对于窗口的位置
// console.log(img)
// console.log(span)
var tLeft = $(img).offset().left;
var tTop = $(img).offset().top;
$(this).mousemove(function (e) {
//获取鼠标坐标
var mLeft = e.clientX;
var mTop = e.clientY;
//计算鼠标相对于图片区域的位置
var l = mLeft - tLeft;
var t = mTop - tTop;
//鼠标移动时移动span
$(span).css({
"display": "block",
"left": (l - 100) + "px",
"top": (t - 100) + "px"
});
//计算偏移量
var ll = (l / $(img).width()) * 100 + "%";
var tt = (t / $(img).height()) * 100 + "%";
//设置大图偏移
$(zoom).css({
"display": "block",
"background-position": ll + " " + tt
})
});
//解除绑定
$(this).mouseout(function () {
$(span).css("display", "none");
$(zoom).css("display", "none");
})
}
})(jQuery);
$(".wrap").zoom();
</script>
</body>
</html>js 设置图片放大插件 实现放大镜效果
猜你喜欢
转载自blog.csdn.net/weixin_44360943/article/details/108632936
今日推荐
周排行