快捷導(dǎo)航

JavaScript實現(xiàn)京東放大鏡效果

更新時間：2019年12月03日 08:49:56 作者：空谷丶幽蘭

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

本文實例為大家分享了JavaScript實現(xiàn)京東放大鏡展示的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果：

1.鼠標(biāo)放到圖片上顯示放大鏡和詳細(xì)圖，鼠標(biāo)離開時什么都不顯示（效果消失）
2.鼠標(biāo)一直在放大鏡的中間，且放大鏡隨鼠標(biāo)移動
3.放大鏡不能出縮列圖的盒子
4.鼠標(biāo)放在詳細(xì)圖上詳細(xì)圖消失

實現(xiàn)細(xì)節(jié)：

1.大盒子雖然比詳細(xì)圖的盒子寬度小，但是在邏輯上詳細(xì)圖的盒子屬于大盒子
2.詳細(xì)圖不能使用浮動，因為盒子下面一般會有文字內(nèi)容
3.以父盒子來定位詳細(xì)圖的盒子
4.放大鏡鼠標(biāo)選中為十字形
5.對圖片進(jìn)行定位才能使圖片移動
6.使用var evt = event || window.event; //兼容性寫法
7.用放大鏡頂點在盒子中的位置根據(jù)比例找到圖片的位置，來顯示圖片
8.圖片在詳細(xì)圖中的定位為負(fù)值

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>京東放大鏡</title>
 <style>
 .box{ /*大盒子雖然比詳細(xì)圖的盒子寬度小，但是在邏輯上詳細(xì)圖的盒子屬于大盒子*/
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px;
 border: 1px solid #aaa;
 }
 .box .detailed{ /*詳細(xì)圖不能使用浮動，因為盒子下面一般會有文字內(nèi)容*/
 width: 450px;
 height: 450px;
 border: 1px solid #aaa;
 position: absolute;
 overflow: hidden;
 left: 365px; /*以父盒子來定位*/ 
 top: 0;
 /*初始設(shè)置為不可見*/
 display: none;
 }
 .box .normal .magnfier{
 width: 150px;
 height: 150px;
 top: 0;
 left: 0;
 position: absolute;
 background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity來設(shè)置透明度*/
 cursor: move; /*鼠標(biāo)選中為十字*/
 display: none; /*初始設(shè)為不可見*/
 }
 .detailed img{ /*對圖片進(jìn)行定位使圖片移動*/
 position: absolute;
 top: 0;
 left: 0;
 }
 </style>
 <script>
 function $(id){
 return document.getElementById(id);
 }
 window.onload = function(){
 var box = $('box');
 var normal = box.children[0];
 var margnfier = normal.children[1];//獲取放大鏡的Dom對象，document.getElementsByClassName來獲取。
 var detailed = box.children[1];//獲得縮略圖DOM對象也可以用document.getElementsByClassName('zoom')[0];
 var detailedImg = box.children[1].children[0];
 normal.onmouseover = function(){//不能給box注冊onmousever事件，否則快速移到詳細(xì)圖上是詳細(xì)圖也不會消失，
 margnfier.style.display = 'block';
 detailed.style.display = 'block';
 }
 normal.onmouseout = function(){
 margnfier.style.display = 'none';
 detailed.style.display = 'none';
 }
 var x = 0;
 var y = 0;
 //控制zoom放大鏡部分在normal里面的移動
 normal.onmousemove = function(event){
 var evt = event || window.event;
 //兼容性寫法
 x = evt.clientX - box.offsetLeft - margnfier.offsetWidth / 2;
 y = evt.clientY - box.offsetTop - margnfier.offsetHeight / 2; 
 //判斷鼠標(biāo)是不是溢出了normal的區(qū)域，
 if(x < 0){
 x = 0; 
 }else{
 if(x > box.offsetWidth - margnfier.offsetWidth){
 x = box.offsetWidth - margnfier.offsetWidth;
 }
 }
 if(y < 0){
 y = 0;
 }else{
 if(y > box.offsetHeight - margnfier.offsetHeight){
  y = box.offsetHeight - margnfier.offsetHeight;
 }
 }
 margnfier.style.left = x + 'px';
 margnfier.style.top = y + 'px';
 var detailedX = -x * 800 / this.offsetWidth;
 var detailedY = -y * 800 / this.offsetHeight;
 //用放大鏡頂點在盒子中的位置根據(jù)比例找到圖片的位置，來顯示圖片
 //改變圖片位置
 detailedImg.style.left = detailedX + 'px';
 detailedImg.style.top = detailedY + 'px';
 } 
 }
 </script>
</head>
<body>
 <div id="box" class="box"> <!--包含詳細(xì)圖和縮略圖的盒子-->
 <div class="normal">
 <img src="imgs/show.jpg" alt="">
 <div class="magnfier"></div>
 </div>
 <div class="detailed">
 <img src="imgs/detail.jpg" alt="">
 </div>
 </div>
</body>
</html>