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