溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript實現京東購物放大鏡和選項卡效果的方法。分享給大家供大家參考，具體如下：
購物網站點擊商品后，都會有一個查看物品圖片，并且可以放大仔細觀察物品的功能。這個功能看起來復雜，其實實現起來非常簡單。下面我們來一起做這個小效果吧！
首先，我們看一下頁面的布局：
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;
}
.small-box .square{
position: absolute;
background-color: yellow;
opacity: 0.5;
display: none;
}
.small-box .mask{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top:0;
left:0;
}
.img-list ul:after{
clear: both;
content: '';
display: table;
}
.img-list ul li{
float: left;
padding: 0 8px;
}
.img-list img{
border: 2px solid transparent;
}
.img-list img.active{
border: 2px solid red;
}
.big-box{
position: absolute;
top:0;
left: 100%;
margin-left: 2px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
display: none;
overflow: hidden;
}
.big-box img{
position: absolute;
}
</style>
</head>
<body>
<div class="zoom-box">
<div class="small-box">
<img src="../../../img/京東放大鏡/m1.jpg" >
<div class="square">
</div>
<div class="mask"></div>
</div>
<div class="img-list">
<ul>
<li><img class="active" src="../../../img/京東放大鏡/s1.jpg" data-small="../../../img/京東放大鏡/m1.jpg"
data-big="../../../img/京東放大鏡/b1.jpg"></li>
<li><img src="../../../img/京東放大鏡/s2.jpg" data-small="../../../img/京東放大鏡/m2.jpg"
data-big="../../../img/京東放大鏡/b2.jpg"></li>
<li><img src="../../../img/京東放大鏡/s3.jpg" data-small="../../../img/京東放大鏡/m3.jpg"
data-big="../../../img/京東放大鏡/b3.jpg"></li>
<li><img src="../../../img/京東放大鏡/s4.jpg" data-small="../../../img/京東放大鏡/m4.jpg"
data-big="../../../img/京東放大鏡/b4.jpg"></li>
<li><img src="../../../img/京東放大鏡/s5.jpg" data-small="../../../img/京東放大鏡/m5.jpg"
data-big="../../../img/京東放大鏡/b5.jpg"></li>
<li><img src="../../../img/京東放大鏡/s6.jpg" data-small="../../../img/京東放大鏡/m6.jpg"
data-big="../../../img/京東放大鏡/b6.jpg"></li>
</ul>
</div>
<div class="big-box">
<img src="../../../img/京東放大鏡/b1.jpg" >
</div>
</div>
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操作就不會有影響了。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
