前端编程之页面放大镜功能的实现
Posted yxkj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端编程之页面放大镜功能的实现相关的知识，希望对你有一定的参考价值。
淘过宝的都知道，有些网站需要对商品进行放大镜功能，也就是当鼠标移动到商品上面时，会在旁边出现细节的放大效果，这对于一些商城类网站来说，是一定需要具备的，那么页面放大镜功能是如何来实现的呢?下面就跟大家分享一下。
实现代码：
<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开发燚轩科技整理发布，如需转载请注明原文作者及出处!
以上是关于前端编程之页面放大镜功能的实现的主要内容，如果未能解决你的问题，请参考以下文章
每次我在前端放大/缩小时，如何以编程方式检查 Altair 图表的放大/缩小功能
全栈之前端编程Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页
全栈之前端编程Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页