前端編程之頁面放大鏡功能的實現
淘過寶的都知道，有些網站需要對商品進行放大鏡功能，也就是當鼠標移動到商品上面時，會在旁邊出現細節的放大效果，這對於一些商城類網站來說，是一定需要具備的，那麽頁面放大鏡功能是如何來實現的呢?下面就跟大家分享一下。
實現代碼：
<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" >
</div>
<div class="box_top_right">
<img src="imgs/timg.jpg" >
</div>
</div>
<div class="box_bottom">
<img src="imgs/timg.jpg" >
<img src="imgs/b.jpg" >
<img src="imgs/c.jpg" >
<img src="imgs/d.jpg" >
</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>
好了，相信看到這裏大家都知道該如何去做了，那麽現在可以保存查看一下效果了，如果沒有做出放大鏡效果的程序員也不需要灰心，可以在下方留言詢問，或者跟其他人互動來解決都是可以的。
本文由專業的app開發燚軒科技整理發布，如需轉載請註明原文作者及出處!
前端編程之頁面放大鏡功能的實現