JavaScript實現(xiàn)京東放大鏡效果
更新時間：2019年12月03日 08:49:56 作者：空谷丶幽蘭
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)京東放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)京東放大鏡展示的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)效果：
1.鼠標放到圖片上顯示放大鏡和詳細圖，鼠標離開時什么都不顯示（效果消失）
2.鼠標一直在放大鏡的中間，且放大鏡隨鼠標移動
3.放大鏡不能出縮列圖的盒子
4.鼠標放在詳細圖上詳細圖消失
實現(xiàn)細節(jié)：
1.大盒子雖然比詳細圖的盒子寬度小，但是在邏輯上詳細圖的盒子屬于大盒子
2.詳細圖不能使用浮動，因為盒子下面一般會有文字內(nèi)容
3.以父盒子來定位詳細圖的盒子
4.放大鏡鼠標選中為十字形
5.對圖片進行定位才能使圖片移動
6.使用var evt = event || window.event; //兼容性寫法
7.用放大鏡頂點在盒子中的位置根據(jù)比例找到圖片的位置，來顯示圖片
8.圖片在詳細圖中的定位為負值
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京東放大鏡</title>
<style>
.box{ /*大盒子雖然比詳細圖的盒子寬度小，但是在邏輯上詳細圖的盒子屬于大盒子*/
width: 350px;
height: 350px;
position: relative;
margin: 100px;
border: 1px solid #aaa;
}
.box .detailed{ /*詳細圖不能使用浮動，因為盒子下面一般會有文字內(nèi)容*/
width: 450px;
height: 450px;
border: 1px solid #aaa;
position: absolute;
overflow: hidden;
left: 365px; /*以父盒子來定位*/
top: 0;
/*初始設置為不可見*/
display: none;
}
.box .normal .magnfier{
width: 150px;
height: 150px;
top: 0;
left: 0;
position: absolute;
background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity來設置透明度*/
cursor: move; /*鼠標選中為十字*/
display: none; /*初始設為不可見*/
}
.detailed img{ /*對圖片進行定位使圖片移動*/
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事件，否則快速移到詳細圖上是詳細圖也不會消失，
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;
//判斷鼠標是不是溢出了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"> <!--包含詳細圖和縮略圖的盒子-->
<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>
更多關于放大鏡的效果，請查看專題：《放大鏡特效》
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
字符串標簽函數(shù)是一種特殊的函數(shù)調(diào)用語法，本文將深入探討ES6中字符串標簽函數(shù)的工作原理，并結(jié)合具體的代碼展示它的威力，快跟隨小編一起學習起來吧2023-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機點名程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼
這篇文章主要介紹了JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了js圖片無縫滾動插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
JS實現(xiàn)點擊發(fā)送驗證碼 xx秒后重新發(fā)送功能
在一些注冊類的網(wǎng)站，經(jīng)常遇到這樣的需求，點擊發(fā)送驗證碼，xx秒后重新發(fā)送，這樣的功能怎么實現(xiàn)呢，接下來通過本文給大家分享js點擊發(fā)送驗證碼 xx秒后重新發(fā)送功能，需要的朋友參考下吧2019-07-07
這篇文章主要介紹了JS實現(xiàn)模糊查詢帶下拉匹配效果,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JS得到當前時間的方法,結(jié)合具體實例形式對比分析了javascript獲取日期時間的相關操作技巧,需要的朋友可以參考下2017-03-03
想要實現(xiàn)如題所示:父窗體需要頂一個show()方法，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
本文主要給大家詳細總結(jié)了下javascript中的運算符，包括常見的算數(shù)運算符、比較運算符和邏輯運算符。十分的清晰，有需要的小伙伴可以參考下。2015-06-06
javaScript 中的 call() 是一個奇妙的方法，但也是一個讓人迷惑的方法，先看一下官方的解釋。2010-04-04