快捷導(dǎo)航

javascript實(shí)現(xiàn)商品圖片放大鏡

更新時(shí)間：2019年11月28日 14:36:53 作者：Maybion

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)商品圖片放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

優(yōu)化原因

現(xiàn)在的電商商城項(xiàng)目解決的主要是購(gòu)買商品的問(wèn)題，那么購(gòu)買商品主要要看清楚商品表面外形的主要特征和細(xì)節(jié)，如果圖片處理過(guò)小，或者細(xì)節(jié)過(guò)于模糊，就需要做一個(gè)商品高清圖片放大局部的功能。

技術(shù)關(guān)鍵點(diǎn)

1.左側(cè)和上側(cè)距離，在一個(gè)水平位置和垂直位置中有我們可以挪動(dòng)的區(qū)域，就是原圖片區(qū)域，鼠標(biāo)挪動(dòng)位置是一個(gè)塊狀位置，他的左側(cè)和上側(cè)距離瀏覽器上側(cè)和左側(cè)分別有一個(gè)長(zhǎng)度，我們叫它們 ClientX 和 ClientY，而左上側(cè)鼠標(biāo)沒(méi)有略過(guò)的位置實(shí)際上是一個(gè)點(diǎn)，我們拖動(dòng)放大塊時(shí)，它會(huì)由一個(gè)點(diǎn)變成一個(gè)方塊，這個(gè)放大鏡左上邊的點(diǎn)所控制的這一點(diǎn)距離屏幕上側(cè)和左側(cè)的 ClientY 和 ClientX 會(huì)隨著鼠標(biāo)的移動(dòng)而變大變小，那么要計(jì)算放大塊左側(cè)距離原點(diǎn)和上側(cè)原點(diǎn)就要減去原圖距離屏幕的上邊高度和左邊高度。在一個(gè)水平位置和垂直位置中有我們可以挪動(dòng)的區(qū)域，就是原圖片區(qū)域，鼠標(biāo)挪動(dòng)位置是一個(gè)塊狀位置，他的左側(cè)和上側(cè)距離瀏覽器上側(cè)和左側(cè)分別有一個(gè)長(zhǎng)度，我們叫它們 ClientX 和 ClientY，而左上側(cè)鼠標(biāo)沒(méi)有略過(guò)的位置實(shí)際上是一個(gè)點(diǎn)，我們拖動(dòng)放大塊時(shí)，它會(huì)由一個(gè)點(diǎn)變成一個(gè)方塊，這個(gè)放大鏡左上邊的點(diǎn)所控制的這一點(diǎn)距離屏幕上側(cè)和左側(cè)的 ClientY 和 ClientX 會(huì)隨著鼠標(biāo)的移動(dòng)而變大變小，那么要計(jì)算放大塊左側(cè)距離原點(diǎn)和上側(cè)原點(diǎn)就要減去原圖距離屏幕的上邊高度和左邊高度。

計(jì)算方式

x = 事件對(duì)象.clientX - 外側(cè)盒子.offsetLeft;
Y = 事件對(duì)象.clientY - 外側(cè)盒子.offsetTop;

2.解決如何鼠標(biāo)在黃塊內(nèi)居中的問(wèn)題，橫縱位移分別加上放大黃塊一半的長(zhǎng)度和寬度。

計(jì)算方式

x = 事件對(duì)象.clientX - 外側(cè)盒子.offsetLeft - 小黃.offsetWidth/2;
Y = 事件對(duì)象.clientY - 外側(cè)盒子.offsetTop - 小黃.offsetHeight/2;
// 事件對(duì)象的 offsetX 和 offsetY
// 歸屬于事件對(duì)象
// 作用：關(guān)注的鼠標(biāo)的坐標(biāo)（鼠標(biāo)相對(duì)于當(dāng)前元素的坐標(biāo)）
// 元素的 offsetLeft 和 offsetTop
// 歸屬于元素
// 作用：關(guān)注的元素的坐標(biāo)（相對(duì)于offsetParent的坐標(biāo)）

3. 小黃塊的最大距離

4.用preventDefault阻止事件冒泡

簡(jiǎn)易實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="base.css" rel="external nofollow" />
</head>
<body>
 <div class="w">
 <div class="fdj">
 <!-- 左側(cè) -->
 <div class="leftBox" id="_leftBox">
 <!-- 小圖 -->
 <img src="img/m.jpg" alt=""/>
 <!-- 小黃盒子 -->
 <div class="tool" id="_tool"></div>
 </div>
 <!-- 右側(cè) -->
 <div class="rightBox" id="_rightBox">
 <img id="_bImg" src="img/b.jpg" alt=""/>
 </div>
 </div>
 </div>
 <!-- 引入的外部js程序文件 -->
 <script src="index.js"></script>
</body>
</html>

* {
 margin:0;
 padding:0;
}

.w {
 width: 1190px;
 margin: 0 auto;

}
.fdj {
 margin-top: 20px;
}

.fdj .leftBox {
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;
 float: left;
 position: relative;
 overflow: hidden;
}

.fdj .tool {
 width: 250px;
 height: 250px;
 background:gold;
 opacity:.5;
 filter:alpha(opacity=50);
 position: absolute;
 top:0;
 left: 0;
 cursor: move;
 /* 默認(rèn)隱藏 */
 display: none;

}
/* 給小黃加上active 就會(huì)顯示 */
.fdj .tool.active {
 display: block;
}

.fdj .rightBox {
 width: 500px;
 height: 500px;
 border:1px solid #ccc;
 float: left;
 overflow: hidden;
 /* 隱藏 */
 display: none;
 position: relative;
}
/* 加上active表示顯示 */
.fdj .rightBox.active {
 display: block;
}

.fdj .rightBox img {
 position: absolute;
}

//【準(zhǔn)備：獲取要操作的元素】
var _leftBox = document.querySelector('#_leftBox'); // 左側(cè)盒子
var _tool = document.querySelector('#_tool'); // 小黃盒子
var _rightBox = document.querySelector('#_rightBox'); // 右側(cè)盒子
var _bImg = document.querySelector('#_bImg'); // 右側(cè)盒子中的大圖片


//【功能1：鼠標(biāo)進(jìn)入/離開(kāi)左側(cè)盒子顯示/隱藏小黃和右側(cè)盒子】
// 1. 給_leftBox注冊(cè)鼠標(biāo)進(jìn)入事件 onmouseenter
_leftBox.onmouseenter = function () {
 // 1.1 顯示小黃盒子，給小黃盒子添加類名 active
 _tool.className = 'tool active';
 // 1.2 顯示右側(cè)盒子，給右側(cè)盒子添加類名 active 
 _rightBox.className = 'rightBox active';

}

// 2. 給_leftBox注冊(cè)鼠標(biāo)離開(kāi)事件 onmouseleave
_leftBox.onmouseleave = function () {
 // 2.1 顯示小黃盒子，給小黃盒子去除類名 active
 _tool.className = 'tool';
 // 2.2 顯示右側(cè)盒子，給右側(cè)盒子去除類名 active
 _rightBox.className = 'rightBox';
}

//【功能2：鼠標(biāo)在左側(cè)區(qū)域移動(dòng)時(shí)，控制小黃和右側(cè)盒子中圖片的位置】
// 1. 給左側(cè)盒子注冊(cè)鼠標(biāo)移動(dòng)事件 onmosuemove
_leftBox.onmousemove = function (e) {
 // 2. 通過(guò)事件對(duì)象獲取鼠標(biāo)相對(duì)元素的位置(x，y)
 var x = e.clientX - _leftBox.offsetLeft- _tool.offsetWidth/2;
 var y = e.clientY - _leftBox.offsetTop - _tool.offsetHeight/2;

 // 這里給x和y賦值時(shí)，不要用事件對(duì)象的offsetX和offsetY。
 // 原因：因?yàn)椤臼录芭荨浚髽?biāo)在移動(dòng)時(shí)，有時(shí)會(huì)移動(dòng)到小黃盒子上。若移動(dòng)到小黃盒子上時(shí)，獲取的值不是相對(duì)于左側(cè)盒子元素，而是相對(duì)小黃盒子元素。所以當(dāng)鼠標(biāo)進(jìn)入或離開(kāi)小黃時(shí)，獲取的坐標(biāo)值時(shí)大時(shí)小，導(dǎo)致小黃盒子上下左右波動(dòng)。
 // 解決方案：在小黃移動(dòng)事件中，停止冒泡。但是鼠標(biāo)在移動(dòng)時(shí)，就沒(méi)有效果了。
 // 最終解決方案：放棄使用事件對(duì)象offsetX/Y。 選擇事件對(duì)象的clienX/Y 結(jié)合左側(cè)盒子的位置計(jì)算出正確的位置。

 // 2.1 對(duì)x和y限制
 if (x < 0) {
 x = 0;
 }
 if (y < 0) {
 y = 0;
 }
 if (x > _leftBox.offsetWidth - _tool.offsetWidth) {
 x = _leftBox.offsetWidth - _tool.offsetWidth;
 }
 if (y > _leftBox.offsetHeight - _tool.offsetHeight) {
 y = _leftBox.offsetHeight - _tool.offsetHeight;
 }

 // 3. 把計(jì)算好的位置 賦值給小黃 
 _tool.style.left = x + 'px';
 _tool.style.top = y + 'px';

 // 4. 設(shè)定右側(cè)大圖片的位置（設(shè)置的方向是相反的,比例關(guān)系是1:2）
 _bImg.style.left = -2 * x + 'px';
 _bImg.style.top = -2 * y + 'px';
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: