Anyone who has been through treasure knows that some websites need to use the magnifying glass function on the product, that is, when the mouse moves over the product, the magnifying effect of the details will appear next to it. This is a must for some mall websites. So how does the page magnifying glass function come true? Let me share it with you below.
Implementation code:
<style>
html,body{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
margin: 100px auto 0;
display: flex;
}
.box{
width: 400px;
height: 500px;
position: relative;
border: 1px solid red;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 5px;
}
.box_top{
width: 400px;
height: 400px;
display: flex;
position: relative;
border: 1px solid green;
}
.box_top_left{
width: 400px;
height: 400px;
position: relative;
}
.box_top_left_999{
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.box_top_left_99{
width: 200px;
height: 200px;
position: absolute;
z-index: 99;
background-color: rgb(81, 223, 255);
opacity: 0.5;
display: none;
}
.box_top_left img{
width: 100%;
height: 100%;
}
.box_top_right{
width: 400px;
height: 400px;
overflow: hidden;
position: absolute;
left: 500px;
border: 1px solid red;
display: none;
}
.box_top_right img{
width: 800px;
height: 800px;
position: relative;
display: block;
}
.box_bottom{
width: 400px;
height: 80px;
display: flex;
align-items: center;
border: 1px solid blue;
padding: 1% 0;
}
.box_bottom img{
width: 23%;
height: 100%;
margin: 0 1%;
}
</style>
</head>
<body>
<main>
<div class="main">
<div class="box">
<div class="box_top">
<div class="box_top_left">
<div class="box_top_left_999"></div>
<div class="box_top_left_99"></div>
<img src="imgs/timg.jpg" alt="">
</div>
<div class="box_top_right">
<img src="imgs/timg.jpg" alt="">
</div>
</div>
<div class="box_bottom">
<img src="imgs/timg.jpg" alt="">
<img src="imgs/b.jpg" alt="">
<img src="imgs/c.jpg" alt="">
<img src="imgs/d.jpg" alt="">
</div>
</div>
</div>
</main>
<script>
$(".box_bottom img").each(function(){
$(this).mouseover(function(){
$(".box_top_left img").attr("src",$(this).attr("src"))
$(".box_top_right img").attr("src",$(this).attr("src"))
})
})
$(".box_top_left_999").mousemove(function(e){
var top = e.pageY;
var left = e.pageX;
$(".box_top_left_99").css("display","block")
$(".box_top_right").css("display","block")
var new_left_x = $(this).offset().left+100;
var new_left_d = $(this).offset().left+300;
var img_left = left - new_left_x
img_left = -img_left
img_left = img_left*2
if( left > new_left_x){
if(left < new_left_d){
$(".box_top_left_99").css("left",left - new_left_x)
$(".box_top_right img").css("left",img_left)
}else{
$(".box_top_left_99").css("left",200)
$(".box_top_right img").css("left",-400)
}
}else{
$(".box_top_left_99").css("left",0)
$(".box_top_right img").css("left",0)
}
var new_top_x = $(this).offset().top+100;
var new_top_d = $(this).offset().top+300;
var img_top = top - new_top_x
img_top = -img_top
img_top = img_top*2
if(new_top_x < top){
if(new_top_d>top){
$(".box_top_left_99").css("top",top - new_top_x)
$(".box_top_right img").css("top",img_top)
}else{
$(".box_top_left_99").css("top",200)
$(".box_top_right img").css("top",-400)
}
}else{
$(".box_top_left_99").css("top",0)
$(".box_top_right img").css("top",0)
}
}).mouseout(function(){
$(".box_top_left_99").css("display","none")
$(".box_top_right").css("display","none")
})
</script>
Well, I believe everyone knows how to do it when you see it here, so now you can save it and check the effect. If the programmer who did not make the magnifying glass effect does not need to be discouraged, you can leave a message below to ask, or interact with others It is possible to solve it.
This article is organized and published by Yixuan Technology, a professional app developer. If you need to reprint, please indicate the original author and source!