1、需求 :模拟查看京东商品的放大镜效果。
2、HTML代码如下:
<div id="preview" class="col pr-0">
<div class="card bg-transparent mr-5 position-absolute">
<!-- 中图片 -->
<img id="md_img" class="card-img-top" src="img/57e3b072N661cd00d.jpg" alt="Card image cap">
<!-- 遮罩层 -->
<div id="mask" class="position-absolute d-none"></div>
<!-- 透明层 -->
<div id="super-mask" class="position-absolute"></div>
<!-- 大图片 -->
<div id="div-lg" class="position-absolute d-none"></div>
<div class="card-body p-0 text-center">
<!-- 左按钮 -->
<img id="btn_left" src="img/hover-prev.png" class="btn float-left btn-light border-0 p-1 pt-4 pb-4 disabled">
<div class="d-inline-block pt-2 mx-0 m-auto">
<ul id="ul_img" class="list-unstyled mb-0">
<!-- 小图片 -->
<!--<li class="float-left p-1">
<img src="img/57e3b072N661cd00d.jpg" data-md="img/57e3b072N661cd00d.jpg" data-lg="img/57e3b072N661cd00d.jpg">
</li>-->
</ul>
</div>
<!-- 右按钮 -->
<img id="btn_right" src="img/hover-next.png" class="btn float-right btn-light border-0 p-1 pt-4 pb-4">
</div>
</div>
</div>
3.css样式如下:
/*放大镜样式*/
#preview>.card>.card-body>div{
width:248px;
overflow:hidden;
}
#preview>.card>.card-body>div>ul{
transition:all .5s linear;
}
#preview>.card>.card-body>div>ul>li{
width:62px; height:62px;
}
#preview>.card>.card-body>div>ul img{
width:52px; height:52px;
}
#preview>.card>.card-body>div>ul img:hover{
border:1px solid #e4393c;
}
#preview>div>img{width:354px}
#mask{
width:176px; height:176px;
background-color:#ffa;
opacity:.5;
}
#super-mask{
width:352px; height:352px;
}
#div-lg{
width:400px; height:400px;
left:354px;
z-index:1000;
border: 1px solid rgba(0, 0, 0, 0.125)
}
4.js实现如下:
$(function () {
if (location.search !== "") {
var lid = location.search.split("=")[1];
$.ajax({
url: "http://localhost:6000/products",
type: "get",
data: { lid },
dataType: "json",
success: function (result) {
var { pics, product, specs } = result;
//图片加载
var pic_html = "";
for (var pic of pics) {
pic_html += `<li class="float-left p-1"><img src="${pic.sm}" data-md="${pic.md}" data-lg="${pic.lg}"></li>`
}
// 当小图片较多时会被挤下来成两行,因此重新加载ul的width,使其样式不发生改变
var img_width = 62;
var $ul_img = $("#ul_img");
$ul_img.html(pic_html).css("width",img_width*pics.length);
// 加载第一张小图片对应的中图片
var $md_img = $("#md_img");
$md_img.attr("src",pics[0].md);
// 加载第一张小图片对应的大图片
var $lg_img = $("#div-lg");
$lg_img.css("background-image",`url(${pics[0].lg})`);
// 点击左右箭头,移动小图片
var $btn_left = $("#btn_left");
var $btn_right = $("#btn_right");
var times = 0;
// 如果图片的数量小于4张,那么右边按钮就禁用
if (pics.length <=4) {
$btn_right.addClass("disabled");
}
// 点击右边图片按钮时,触发点击事件
$btn_right.click(function() {
if(!$btn_right.is(".disabled")){
// 每次点击左边按钮,次数+1
times++;
// 此时的ul的向右边移动的距离就是
$ul_img.css("margin-left",-times*img_width);
// 只要右边按钮可以点击,左边也可以点击
$btn_left.removeClass("disabled");
// 如果times==pics.length-4的话,右边按钮就禁用
if(times== pics.length-4)
$btn_right.addClass("disabled");
}
})
// 点击左边图片按钮时,触发点击事件
$btn_left.click(function() {
if (!$btn_left.is(".disabled")){
// 每次点击左边按钮,次数-1
times--;
// ul移动的距离
$ul_img.css("margin-left",-times*img_width);
// 只要左边按钮可以点击,则右边按钮也可以点击
$btn_right.removeClass("disabled");
// 如果times为0,那么左边的按钮禁用
if (times ==0)
$btn_left.addClass("disabled");
}
})
// 当鼠标进入小图片时,切换为中图片。又要为每一个li>img,添加鼠标进入事件,那么就
// 通过事件委托的方式来实现该操作
$ul_img.on("mouseenter","li>img",function(){
$md_img.attr("src",$(this).attr("data-md"));
// 当切换中图片的,同时,加载大图片,获得当前小图片的data-lg属性
$lg_img.css("background-image",`url(${$(this).attr("data-lg")})`);
})
// 获取遮罩层
var $mask = $("#mask");
// 获取透明层
var $superMask = $("#super-mask");
//小遮罩层的大小
var maskSize = 176;
//super-mask的大小
var superMaskSize = 352;
// 当鼠标进出上层透明div时,切换小遮罩层mask的显示或隐藏
$superMask.hover(function() {
$mask.toggleClass("d-none");
// 同时显示或隐藏大图片
$lg_img.toggleClass("d-none");
})
// 让遮罩层跟随鼠标移动
.mousemove(function(e) {
// 无论鼠标移动在哪个位置,都获取遮罩层的中心坐标
var top = e.offsetY - maskSize/2;
var left = e.offsetX - maskSize/2;
// 如果top<0,就拉回0,如果top>superMaskSize-maskSize,就拉回边界位置
if(top<0) {
top = 0;
} else if(top>superMaskSize-maskSize){
top = superMaskSize-maskSize;
}
// 同理,左边界同上
if (left<0) {
left = 0;
}else if(left>superMaskSize-maskSize) {
left = superMaskSize-maskSize;
}
$mask.css({
top: top+"px",
left: left+"px"
})
// 同时修改大图片的背景图位置,中图片350,大图片800,比例16:7
$lg_img.css("background-position",`${-left*16/7}px ${-top*16/7}px`);
})
}
})
}
})
5.效果如图:
6.转载请注明出处。