隨著科技的發(fā)展,網(wǎng)購已成為大家生活中必不可少的一個模式,各種電商平臺也如雨后春筍般涌現(xiàn)出來,今天我們就來用原生js來實現(xiàn)類似淘寶選購物品時的放大鏡效果.
這里要用到大小兩張圖片,我選取的是800x800和350x350大小的兩張圖片
圖片來源于網(wǎng)絡(luò)
首先寫出html和css樣式
html部分
<body>
<div class="min">
<img src="img/1.jpg" />
<div class="fd"></div>
</div>
<div class="max"><img src="img/2.jpg" /></div>
</body>
原理是創(chuàng)建min和max兩個區(qū)域,將小圖img/1.jpg和創(chuàng)建的放大鏡divfd放到min中,將大圖img/2.jpg放到max中
css樣式部分
<style type="text/css">
.min{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
position: relative;
}
.max{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
display: none;
overflow: hidden;
position: relative;
}
.max img{
position: absolute;
margin: 0 auto;
}
.fd{
width: 153.125px;
height: 153.125px;
background-color: skyblue;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
display: none;
}
這里需要強調(diào)的是
1.大圖相對于父級絕對定位末荐。
2.放大鏡的寬高,如果按照我選的尺寸的兩張圖寬高必須為153.125px,否則會出現(xiàn)左側(cè)所選區(qū)域和右側(cè)顯示區(qū)域不能完全吻合的情況;
3.大圖的父級max定義的框尺寸為什么比里面的圖片小?(這里的框相當(dāng)于一個窗戶,里面的圖片相當(dāng)于窗子一面的物體,無論里面的物體多大也只能顯示出窗子的尺寸)
4.當(dāng)鼠標放在小圖外區(qū)域時,大圖和放大鏡無顯示,所以開始置max和fd里display:none;
為了顯示效果我們先把display:none注掉,此時效果如下
樣式圖
js部分
首先分析邏輯順序
1.鼠標覆蓋顯示max和fd
2.確定放大鏡的移動范圍(不能出min)
3.max的對應(yīng)顯示
然后按順序書寫代碼
定義變量
<script type="text/javascript">
var min = document.querySelector(".min"),
max = document.querySelector(".max"),
img = document.querySelector(".max img"),
fd = document.querySelector(".fd");
操作
min.onmouseover = function(){
//1.鼠標覆蓋顯示max和fd
max.style.display = "block";
fd.style.display = "block";
}
//離開時隱藏
min.onmouseout= function(){
max.style.display = "none";
fd.style.display = "none";
}
//2.fd的移動范圍
min.onmousemove = function(){
//鼠標觸摸的點
var x = event.clientX-min.offsetLeft-fd.offsetWidth/2;
var y = event.clientY-min.offsetTop-fd.offsetHeight/2;
//最大移動距離
var maxX = min.clientWidth-fd.offsetWidth;
var maxY = min.clientHeight-fd.offsetHeight;
//邊界判斷
if(x<=0){
x=0;
}else if(x>=maxX){
x=maxX;
}
if(y<=0){
y=0;
}else if(y>=maxY){
y=maxY;
}
//fd的位置
fd.style.left = x+"px";
fd.style.top = y+"px";
//fd/min = max/img
//移動比例
var yidongX = x/maxX;
var yidongY = y/maxY;
//移動
//3.max的對應(yīng)顯示
// 對于大圖而言 放大鏡在小圖上移動的比例 相當(dāng)于img在可顯示區(qū)域上移動的比例 放大鏡右移等于圖片左移
// 也就是本質(zhì)上為img - max 然而需要負值 則*-1 簡化后 為max-img
img.style.left = yidongX * (max.clientWidth - img.offsetWidth) + "px";
img.style.top = yidongY * (max.clientHeight - img.offsetHeight) + "px";
}
</script>
最后根據(jù)需求完善即可
實現(xiàn)效果如下
1.gif
