在一些主流的購物網站上，我們經常能看到一些帶有放大鏡效果的圖片框，看似神奇，指哪哪大，其實實現的原理很簡單
主要原理：實現放大鏡的核心是需要有三套大小不同，形狀相同的圖片，通過座標的改變來實現圖片的區域切換；
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大鏡</title>
<link rel="stylesheet" href="./css/index.css">
<!-- 引入css樣式 -->
</head>
<body>
<!-- 整個案例 -->
<div class="box">
<!-- 大圖 -->
<div class="big_box_img"></div>
<!-- 中圖 -->
<div class="banner" data-src="img/_800x1026.jpg">
<img class="middleImage" src="./img/cc_350x449.jpg" alt="">
<div class="ceng"></div>
</div>
<!-- 小圖 -->
<div class="small_box">
<div class="small_box_img" data-big="img/cc_800x1026.jpg" data-src="./img/cc_350x449.jpg">
<img src="./img/cc_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/c_800x1026.jpg" data-src="./img/.jpg">
<img src="./img/_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/800x1026.jpg" data-src="./img/cc_350x449.jpg">
<img src="./img/cc_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/cc_800x1026.jpg" data-src="./img/cc_350x449.jpg">
<img src="./img/!cc_50x64.jpg" alt="">
</div>
<div class="small_box_img" data-big="img/cc_800x1026.jpg" data-big="" data-src="./img/cc_350x449.jpg">
<img src="./img/cc_50x64.jpg" alt="">
</div>
</div>
</div>
<script>
//放大鏡共由三套圖組成，大中小圖，基本方式是在小圖上綁定中圖和大圖的事件，當觸發小圖的事件時將
//中圖的路徑傳給中圖img 將大圖的路徑傳給中圖的div 觸發中圖的事件時將中圖div的路徑傳給大圖並使
//隱藏的大圖顯示出來，利用座標計算出 ceng 和鼠標相應的位置。
big_box_img = document.getElementsByClassName('big_box_img')[0];//找到了大圖的img
var box = document.getElementsByClassName('box')[0];//找到了整個大的box
var mousein_img = document.getElementsByClassName('small_box_img');//找到了小圖的img
var oldboder_object = mousein_img[0];//定義了上次執行初值小圖的變量
//相當於使它表示當前變紅的小圖的邊框，在執行新的操作時，它就成爲了上一次的執行對象，方便操作
var move_img = document.getElementsByClassName('middleImage')[0];//找到了中圖的img
var banner = document.getElementsByClassName('banner')[0];//找到中圖的div
var ceng1 = document.getElementsByClassName('ceng')[0];//找到放大鏡鼠標塊的div
mousein_img[0].style.borderColor = '#e60000';//讓小圖的左邊第一個邊框默認變紅
// console.log(banner);之前用於測試
//實現小圖的懸停使得對應的邊框變色且之前的邊框變爲透明色（也就是沒有顏色）
//大致思想：通過for循環，使每個小圖的img都綁定上鼠標進入到小圖事件（onmouseseenter）
//用oldboder_object記錄當前事件，在執行下一事件時，它就變爲了之前的事件！！！！！！
//將當前的邊框變爲了紅色，然後將之前的（oldboder_object）變爲透明
for (var i = 0; i < mousein_img.length; i++) {//將所有的小圖綁定事件
mousein_img[i].onmouseenter = function () {
oldboder_object.style.borderColor = 'transparent';
this.style.borderColor = '#e60000';
oldboder_object = this;//this 表示當前執行
move_img.src = this.getAttribute("data-src");//data-src表示中圖的src（自定義）
banner.setAttribute('data-src', this.getAttribute('data-big'));//data-big表示大圖的src（自定義）
}
}
//實現中圖鼠標進入時候的事件綁定
//
banner.onmouseenter = function () {
console.log('sada');//用於測試是否找到元素
big_box_img.style.display = "block";//將隱藏的大圖的div顯示出來
ceng1.style.display = 'block';//將隱藏的 ceng 的div顯示出來
var big_img_src = banner.getAttribute('data-src');//定義一個變量將中圖div中的src傳入
big_box_img.style.backgroundImage = 'url(' + big_img_src + ')';//利用字符串拼接將big_img_src
//中的src 傳入big_box_img的背景圖片中
}
banner.onmousemove = function (e) {
this.style.cursor = 'move';//改變鼠標在中圖中的默認形狀
var x = e.pageX || e.clientX;//定義鼠標在中圖中的X座標
var y = e.pageY || e.clientY;//定義鼠標在中圖中的Y座標
var left = (x - box.offsetLeft - 118.125) <= 0 ? 0 : (x - box.offsetLeft - 118.125) >= 113.75 ? 113.75 : (x - this.offsetLeft - 118.125);//offsetLeft左邊界偏移的像素值（鎖定ceng的位置，當鼠標位置大於限定的距離時，位置保持不變）
var top = ((y - box.offsetTop - 118.115)) <= 0 ? 0 : (y - box.offsetTop - 118.115) >= 212.69 ? 212.69 : (y - this.offsetTop - 118.115);//offsetTop上邊界偏移的像素值
ceng1.style.left = left + 'px';
ceng1.style.top = top + 'px';//配合將鼠標的座標放在ceng的中間且限定ceng的位置
big_box_img.style.backgroundPosition=-left * 2.28+"px "+-(top * 2.28)+"px";//限制了大圖比例
}
banner.onmouseleave = function () {
ceng1.style.display = 'none';
big_box_img.style.display = 'none';//當鼠標離開中圖時，將大圖中的所有none掉
}
</script>
</body>
</html>
這個案例是一個月前寫的，現在翻出來，我的天吶~~~
我覺得已經寫得有點詳細了，真沒想到我之前那麼努力那麼認真（容許我自戀一秒，哈哈啊哈~^_^~）