利用JavaScript實(shí)現(xiàn)仿京東放大鏡效果
更新時(shí)間：2022年03月08日 10:01:31 作者：一夕ξ
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)仿京東放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
功能實(shí)現(xiàn)
1、鼠標(biāo)經(jīng)過小圖片盒子，黃色的遮擋層和大圖片顯示，離開時(shí)就隱藏2個(gè)盒子功能
2、黃色遮擋層跟著鼠標(biāo)走
把鼠標(biāo)的坐標(biāo)給盒子，不斷地進(jìn)行賦值操作
把鼠標(biāo)地坐標(biāo)給遮擋層不合適，因?yàn)檎趽鯇幼鴺?biāo)以父盒子為準(zhǔn)
首先是獲得鼠標(biāo)在盒子內(nèi)地坐標(biāo)
然后把數(shù)值給遮擋層地left和top值
此時(shí)用到鼠標(biāo)移動(dòng)事件，但是還是在小圖片盒子內(nèi)移動(dòng)
發(fā)現(xiàn)，遮擋層位置不對，需要再減去盒子自身高度和寬度地一半
遮擋層不能超出小圖片盒子范圍
如果小于0，就把坐標(biāo)設(shè)置為0
如果大于遮擋層最大地移動(dòng)距離，就把坐標(biāo)設(shè)置為最大地移動(dòng)距離
遮擋層地最大移動(dòng)距離：小圖片盒子寬度減去遮擋層盒子寬度
3、移動(dòng)黃色遮擋層，大盒子跟著圖片走
也太難了、、、、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #ccc;
}
.tupian {
width: 100%;
height: 100%;
}
/* 不能是box里面所有地img百分百比例，這樣是無法再大盒子里面移動(dòng)圖片地 */
.mask {
display: none;
width: 150px;
height: 150px;
background: rgba(228, 248, 138, 0.3);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
}
.big {
display: none;
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 310px;
background-color: pink;
overflow: hidden;
}
.big img {
position: absolute;
top: 0px;
left: 400px
}
</style>
</head>
<body>
<div class="box"><img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="tupian">
<div class="mask"></div>
<div class="big"><img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="bigimg"></div>
</div>
<script>
//當(dāng)鼠標(biāo)放在box上，箭頭變?yōu)橐苿?dòng)
var tupian = document.querySelector('.tupian')
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var box = document.querySelector('.box')
var bigimg = document.querySelector('.bigimg')
//鼠標(biāo)放在小圖片上時(shí)，黃色遮擋層顯示以及大盒子顯示
box.addEventListener('mouseover', function() { //不能是圖片添加的事件，因?yàn)閙ask一顯示就會(huì)把圖片給擋住
mask.style.display = 'block'
big.style.display = 'block'
})
//鼠標(biāo)離開小圖片，就隱藏
box.addEventListener('mouseout', function() {
mask.style.display = 'none'
big.style.display = 'none'
})
box.addEventListener('mousemove', function(e) {
//先計(jì)算出鼠標(biāo)在盒子內(nèi)地坐標(biāo)
var x = e.pageX - box.offsetLeft
var y = e.pageY - box.offsetTop
//減75(盒子地一般)是為了讓鼠標(biāo)位于盒子地中心
//mask移動(dòng)地距離
var maskx = x - mask.offsetWidth / 2
var masky = y - mask.offsetHeight / 2 //最好這樣賦值一下，就不用考慮if里面地單位情況
//約束--設(shè)置小盒子移動(dòng)范圍
if (maskx <= 0) {
maskx = 0
} else if (maskx >= box.offsetWidth - mask.offsetWidth) {
maskx = box.offsetWidth - mask.offsetWidth
}
if (masky <= 0) {
masky = 0
} else if (masky >= box.offsetHeight - mask.offsetHeight) {
masky = box.offsetHeight - mask.offsetHeight
}
mask.style.left = maskx + 'px'
mask.style.top = masky + 'px'
var maxMax = box.offsetWidth - mask.offsetWidth //遮擋層地最大移動(dòng)距離
var bigMax = bigimg.offsetWidth - big.offsetWidth //大圖片地最大移動(dòng)距離
//大圖片地移動(dòng)距離
var bigx = maskx * bigMax / maxMax
var bigy = masky * bigMax / maxMax
bigimg.style.left = -bigx + 'px'
bigimg.style.top = -bigy + 'px'
})
// tupian.addEventListener('mouseover', function() {
// tupian.addEventListener('mousemove', function(e1) {
// mask.style.display = 'block'
// var x = e1.pageX - tupian.offsetLeft
// var y = e1.pageY - tupian.offsetTop
// mask.style.left = x - 75 + 'px'
// mask.style.top = y - 75 + 'px'
// if (mask.style.bottom < -10) {
// mask.style.bottom = 0 + 'px'
// }
// })
//讓遮罩層跟隨鼠標(biāo)移動(dòng)
// div.addEventListener('mousemove', function(e) {
// var a = e.pageX - div.offsetLeft
// var b = e.pageY - div.offsetTop
// if (a > 75) {
// mask.style.left = e.pageX - div.offsetLeft - x + 'px'
// }
// if (mask.style.left < 0) {
// mask.style.left = 0
// }
// if (b > 75) {
// mask.style.top = e.pageY - y + 'px'
// }
// if (mask.style.top < 0) {
// mask.style.top = 0
// }
// mask.style.left = x - 75 + 'px' //鼠標(biāo)并不一定要在mask的正中間
// mask.style.top = y - 75 + 'px'
// div.addEventListener('mousemove', fn)
// function fn(e) { //這個(gè)函數(shù)一定要寫在mousedown函數(shù)里面才能取出x和y
// //不能讓白色遮罩層出box盒子
// mask.style.left = e.pageX - x - 75 + 'px'
// mask.style.top = e.pageY - y - 75 + 'px'
// }
// })
//鼠標(biāo)離開盒子就取消移動(dòng)事件
// div.addEventListener('mouseout', function() {
// div.removeEventListener('mousemove', fn)
// })
// })
</script>
</body>
</html>
復(fù)盤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
position: relative;
}
.pre {
width: 100%
}
.mask {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 150px;
background-color: pink;
opacity: 0.3;
}
.big {
/* display: none; */
position: absolute;
top: 0px;
left: 310px;
width: 400px;
height: 400px;
background-color: pink;
overflow: hidden;
/* 當(dāng)大盒子里面地圖片出來地時(shí)候，就將出來部分地圖片進(jìn)行隱藏 */
}
/* 鼠標(biāo)進(jìn)入小盒子地時(shí)候，變?yōu)橐苿?dòng) */
.bigtu {
position: absolute;
top: 0px;
left: 0px;
}
.box:hover {
cursor: move
}
</style>
</head>
<body>
<div class="box">
<img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="pre">
<div class="mask"></div>
<div class="big"> <img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="bigtu"></div>
</div>
<script>
//1、鼠標(biāo)進(jìn)入小盒子，遮罩層、大盒子出現(xiàn)
var box = document.querySelector('.box')
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var bigtu = document.querySelector('.bigtu')
box.addEventListener('mouseover', function() {
mask.style.display = 'block'
big.style.display = 'block'
})
//2、鼠標(biāo)離開小盒子地時(shí)候，遮罩層、大盒子隱藏
box.addEventListener('mouseout', function() {
mask.style.display = 'none'
big.style.display = 'none'
})
//3、添加移動(dòng)效果，遮罩層跟隨鼠標(biāo)移動(dòng)，鼠標(biāo)再小盒子地坐標(biāo)就是遮罩層地位置
box.addEventListener('mousemove', function(e) {
//求鼠標(biāo)在小盒子里面地坐標(biāo)
var x = e.pageX - box.offsetLeft
var y = e.pageY - box.offsetTop
//將鼠標(biāo)地坐標(biāo)給遮罩層
// mask.style.left = x + 'px'
// mask.style.top = y + 'px'
//鼠標(biāo)應(yīng)該位于遮罩層地中心位置
var maskx = x - mask.offsetWidth / 2
var masky = y - mask.offsetHeight / 2
//4、應(yīng)該約束遮罩層地移動(dòng)范圍，也就是約束鼠標(biāo)地位置,maskx、masky要大于0,以及要小于一個(gè)值，不能初到底部下面或者右邊地右邊
if (maskx < 0) {
maskx = 0
}
if (maskx > box.offsetWidth - mask.offsetWidth) {
maskx = box.offsetWidth - mask.offsetWidth
}
if (masky < 0) {
masky = 0
}
if (masky > box.offsetHeight - mask.offsetHeight) {
masky = box.offsetHeight - mask.offsetHeight
}
mask.style.left = maskx + 'px'
mask.style.top = masky + 'px'
//5、要讓大盒子里面地圖片移動(dòng)，加相對定位.原理鼠標(biāo)在小盒子里面移動(dòng)地距離與鼠標(biāo)在大盒子里面移動(dòng)地距離是成比例地.其實(shí)就是小盒子圖片地left、top值與大盒子里面地left、top值是成比例地 弄清楚這個(gè)比例關(guān)系很重要
var bigtux = maskx * (bigtu.offsetWidth - big.offsetWidth) / (box.offsetWidth - mask.offsetWidth)
var bigtuy = masky * (bigtu.offsetHeight - big.offsetHeight) / (box.offsetHeight - mask.offsetHeight)
bigtu.style.left = -bigtux + 'px'
bigtu.style.top = -bigtuy + 'px'
//應(yīng)該也要對大盒子里面地圖片移動(dòng)范圍進(jìn)行約束
//忽視了一點(diǎn)：bigtu地大小是450*450地，所以大盒子不能直接等于450*450;應(yīng)該小于450*450；這樣圖片在大盒子里面才有移動(dòng)地余地
//相當(dāng)于左側(cè)地小盒子，對圖片進(jìn)行了縮小，需要在大盒子里面顯示原始圖片，位置對應(yīng)
})
</script>
</body>
</html>以上就是利用JavaScript實(shí)現(xiàn)仿京東放大鏡效果的詳細(xì)內(nèi)容，更多關(guān)于JavaScript放大鏡效果的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了js獲取滾動(dòng)距離的方法,涉及javascript針對頁面滾動(dòng)條的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
原生javascript實(shí)現(xiàn)無間縫滾動(dòng)示例
原生javascript無間縫滾動(dòng)目前支持的是豎向與橫向滾動(dòng)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
使用typescript快速開發(fā)一個(gè)cli的實(shí)現(xiàn)示例
這篇文章主要介紹了使用typescript快速開發(fā)一個(gè)cli的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JS實(shí)現(xiàn)多級(jí)菜單中當(dāng)前菜單不隨頁面跳轉(zhuǎn)樣式而發(fā)生變化
本文介紹了JQuery巧妙實(shí)現(xiàn)多級(jí)菜單中當(dāng)前菜單不隨頁面跳轉(zhuǎn)樣式發(fā)生變化，實(shí)現(xiàn)方法非常簡單，感興趣的朋友一起看看吧2017-05-05
JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)給圖片添加邊框的方法,涉及javascript操作圖片border的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript?canvas實(shí)現(xiàn)字符雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實(shí)現(xiàn)字符雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
js將類數(shù)組對象轉(zhuǎn)換成數(shù)組對象
javascript與dom有許多瑕疵，如著名的類數(shù)組對象Arguments，其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類，那多省時(shí)啊。2010-05-05
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
本文結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來介紹下它稍微高級(jí)點(diǎn)的用法。對bootstrap表格組件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-05-05
PHP中如何unicode編碼，在JavaScript中h如何解碼
PHP中如何unicode編碼，在JavaScript中如何解碼？js中h這樣的，怎么轉(zhuǎn)碼？2023-07-07
小程序自定義單頁面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁面、全局導(dǎo)航欄的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03