放大鏡
2018-04-05
6031
淘過(guò)寶的都知道，有些網(wǎng)站需要對(duì)商品進(jìn)行放大鏡功能，也就是當(dāng)鼠標(biāo)移動(dòng)到商品上面時(shí)，會(huì)在旁邊出現(xiàn)細(xì)節(jié)的放大效果，這對(duì)于一些商城類(lèi)網(wǎng)站來(lái)說(shuō)，是一定需要具備的，那么頁(yè)面放大鏡功能是如何來(lái)實(shí)現(xiàn)的呢?下面專業(yè)的app開(kāi)發(fā)報(bào)價(jià)燚軒科技就跟大家分享一下。
實(shí)現(xiàn)代碼：
<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>
好了，相信看到這里大家都知道該如何去做了，那么現(xiàn)在可以保存查看一下效果了，如果沒(méi)有做出放大鏡效果的程序員也不需要灰心，可以留言詢問(wèn)我們。
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名備案
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名申請(qǐng)
亮度蒙版是影調(diào)調(diào)整的基石。它提供了一個(gè)簡(jiǎn)便的方法來(lái)選取圖...
燚軒科技 ·
11月15日
· 質(zhì)感效果/PS通道
s="p"> <span...
燚軒科技 ·
11月16日
· Alt標(biāo)簽/網(wǎng)站優(yōu)化
目前大家經(jīng)常會(huì)遇到摳圖的問(wèn)題，最多的就是摳人體、頭發(fā)，摳...
燚軒科技 ·
10月31日
· 摳圖/ps技巧
請(qǐng)掃二維碼聯(lián)系客服
854221200@qq.com
185-3825-9583
QQ客服
首頁(yè)
方案
資訊
知庫(kù)
