您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)javascript怎么實(shí)現(xiàn)簡(jiǎn)單放大鏡效果,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
一個(gè)大盒子中有一張圖片,鼠標(biāo)放上去會(huì)出現(xiàn)一個(gè)半透明的遮罩層,鼠標(biāo)移動(dòng),遮罩層跟著移動(dòng),盒子旁邊還有一個(gè)放大的圖片,跟著遮罩層移動(dòng)的位置而改變放大圖的位置,鼠標(biāo)離開(kāi)大盒子,遮罩層和放大圖片消失
1、html、css將盒子,遮罩層、放大圖片頁(yè)面編輯好,設(shè)置遮罩層和放大圖片默認(rèn)隱藏
2、獲取元素對(duì)象,將大盒子綁定鼠標(biāo)事件
鼠標(biāo)經(jīng)過(guò)- - -mouseover,鼠標(biāo)經(jīng)過(guò)時(shí)設(shè)置遮罩層和放大圖顯示:display設(shè)置成'block'
鼠標(biāo)離開(kāi)- - -mouseout,鼠標(biāo)經(jīng)過(guò)時(shí)設(shè)置遮罩層和放大圖顯示:display設(shè)置成'none'
3、計(jì)算出鼠標(biāo)在大盒子中的位置
4、讓鼠標(biāo)在遮罩層的中間位置:讓遮罩層相對(duì)鼠標(biāo)位置向上向左移動(dòng)一半距離就行
遮罩層的位置- - -給它絕對(duì)定位,賦值相對(duì)盒子中的向上向左偏移量
5、限制遮罩層在大盒子里移動(dòng)- - -判斷偏移量的值,<=0 的時(shí)候,偏移量為0
6、放大圖隨著遮罩層的移動(dòng)而改變位置
遮罩層移動(dòng)值 / 遮罩層移動(dòng)最大距離 = 放大圖移動(dòng)距離 / 放大圖移動(dòng)最大距離
根據(jù)這個(gè)關(guān)系式,得到放大圖的移動(dòng)距離
將移動(dòng)距離賦值給放大圖的偏移量top、left
注意:放大圖的偏移量給成負(fù)值,和遮罩層移動(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>手機(jī)詳情頁(yè)</title> <!-- <link rel="stylesheet" href="css/detail.css" > <script src="js/detail.js"></script> --> <style> * { margin: 0; padding: 0; } .detail-content { width: 1200px; margin: 0 auto; } img { border: 0; vertical-align: middle; } .preview_img { position: relative; width: 400px; height: 400px; margin-top: 30px; border: 1px solid #ccc; } .preview_img img { width: 100%; height: 100%; } .mask { display: none; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: pink; opacity: .5; cursor: move; } .big { display: none; position: absolute; top: 0; left: 410px; width: 500px; height: 500px; border: 1px solid #ccc; background-color: pink; z-index: 999; overflow: hidden; } .big img { position: absolute; top: 0; left: 0; width: 800px; height: 800px; } </style> </head> <body> <div class="detail-content"> <div class="preview_img"> <img src="upload/s3.png" alt=""> <div class="mask"></div> <div class="big"> <img src="upload/big.jpg" alt="" class="bigImg"> </div> </div> </div> <script> var previewImg = document.querySelector('.preview_img'); var mask = document.querySelector('.mask'); var big = document.querySelector('.big'); var bigImg = document.querySelector('.bigImg'); // 鼠標(biāo)經(jīng)過(guò)盒子事件 previewImg.addEventListener('mouseover', function() { // 設(shè)置遮擋層和放大圖顯示 mask.style.display = 'block'; big.style.display = 'block'; }) // 鼠標(biāo)離開(kāi)盒子事件 previewImg.addEventListener('mouseout', function() { // 設(shè)置遮擋層和放大圖隱藏 mask.style.display = 'none'; big.style.display = 'none'; }) // 鼠標(biāo)在盒子內(nèi)移動(dòng)事件 previewImg.addEventListener('mousemove', function(e) { // 獲取鼠標(biāo)在盒子中的位置 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // 計(jì)算出遮擋層的移動(dòng)值,讓鼠標(biāo)在遮擋層中間位置 var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; // 盒子為正方形,所以只算最大水平方向 X軸 移動(dòng)值就行,Y軸最大移動(dòng)值和 X軸 一致 var maskMax = previewImg.offsetWidth - mask.offsetWidth; // 限制遮擋層在盒子內(nèi)移動(dòng) if (maskX <= 0) { maskX = 0; } else if (maskX >= maskMax) { maskX = maskMax; } if (maskY <= 0) { maskY = 0; } else if (maskY >= maskMax) { maskY = maskMax; } mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; // 計(jì)算出放大圖的最大移動(dòng)值,大圖水平移動(dòng)值 = 遮擋層移動(dòng)值 * 大圖最大移動(dòng)距離 / 遮擋層最大移動(dòng)距離 var bigMax = bigImg.offsetWidth - big.offsetWidth; var bigX = maskX * bigMax / maskMax; var bigY = maskY * bigMax / maskMax; bigImg.style.left = -bigX + 'px'; bigImg.style.top = -bigY + 'px'; }) </script> </body> </html>
頁(yè)面效果:
關(guān)于“javascript怎么實(shí)現(xiàn)簡(jiǎn)單放大鏡效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。