js實現京東購物放大鏡和選項卡效果
阿新 • • 發佈：2019-01-27
購物網站點選商品後，都會有一個檢視物品圖片，並且可以放大仔細觀察物品的功能。這個功能看起來複雜，其實實現起來非常簡單。下面我們來一起做這個小效果吧！
首先，我們看一下頁面的佈局：
1.小圖片顯示區，上面有一個方形遮罩層
2.縮圖橫向列表
3.大圖顯示區域
然後，我們寫出開發步驟：
1.編寫3個區域的html佈局，使他們位於同一個容器內
2.顯示區域2的圖片列表
3.給區域2的圖片新增mouseover事件，使圖片顯示在區域1內
4.滑鼠移入區域1，生成半透明的選擇框
5.區域3顯示區域2選擇框對應的圖片位置放大的效果
6.滑鼠移除區域2，區域3隱藏
最後，根據需求寫出相應程式碼：
html和css：
<style>
ul{
list-style: none;
padding: 0;
}
.zoom-box{
position: relative;
width: 452px;
}
.small-box{
border: 1px solid #ccc;
position: relative;
} js程式碼：
<script>
var smallBox=$('.small-box .mask');
var smallImg=$('.small-box img');
var square=$('.square');
var imagesList=$all('.img-list img');
var bigBox=$('.big-box');
var bigImg=$('.big-box img');
//選項卡切換
for(var i=0;i<imagesList.length;i++){
imagesList[i].onmouseover=function () {
for (var j=0;j<imagesList.length;j++){
imagesList[j].className='';
}
this.className='active';
bigImg.src=this.getAttribute('data-big');
smallImg.src=this.getAttribute('data-small');
}
}
//滑鼠移進事件
smallBox.onmouseover=function () {
square.style.display='block';
bigBox.style.display='block';
//利用比例公式計算square的寬高
//square的寬/smallImg的寬 = bigBox的寬/bigIma的寬
square.style.width=smallImg.offsetWidth * bigBox.offsetWidth / bigImg.offsetWidth + 'px';
square.style.height=smallImg.offsetHeight * bigBox.offsetHeight / bigImg.offsetHeight + 'px';
};
//滑鼠移出事件
smallBox.onmouseout=function () {
square.style.display='none';
bigBox.style.display='none';
};
//滑鼠移動事件
smallBox.onmousemove=function (e) {
var e=e||window.event;
var x,y;
//x和y的座標
x=e.offsetX-square.offsetWidth/2;
y=e.offsetY-square.offsetHeight/2;
if(x<0){
x=0;
}
if(x>smallBox.offsetWidth-square.offsetWidth){
x=smallBox.offsetWidth-square.offsetWidth;
}
if(y<0){
y=0;
}
if(y>smallBox.offsetHeight-square.offsetHeight){
y=smallBox.offsetHeight-square.offsetHeight;
}
square.style.left=x+'px';
square.style.top=y+'px';
//利用公式計算大圖的座標
//<!--// x/?=smallimg.w/bigimg.w-->
//<!--// y/?=smallimg.h/bigimg.h-->
bigImg.style.left=-x * bigImg.offsetWidth / smallImg.offsetWidth + 'px';
bigImg.style.top=-y * bigImg.offsetHeight / smallImg.offsetHeight + 'px';
};
function $(name) {
return document.querySelector(name);
}
function $all(name) {
return document.querySelectorAll(name);
}
</script>大家可以做一下看看效果：
新增一個mask的div是因為，如果直接在smallBox上新增事件，會受到其中的子元素的影響，導致圖片抖動。而對一個空內容的mask操作就不會有影響了。