溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript怎么實現放大鏡效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
這次實現的效果如下：
這次的案例稍微有一點難度，在css和js上都需要多加思考，話不多說，讓我們來開始吧~
1、首先我們需要使用html和css規劃好整體的布局，即兩個相鄰的盒子A和B，左邊的盒子A中還有一個小盒子S。為了實現相鄰，我采用的方法是為其均設置position:absolute ，然后設置left和top的值來使其相鄰。
小盒子S我們同樣可以為其設置position:absolute，調整一下背景顏色即可。
2、然后我們需要使用js來設置動畫效果，即：鼠標放在盒子A上時，小盒子S的位置會隨著鼠標的移動發生移動，同時盒子B中的圖像會成為盒子S覆蓋圖像的放大版。如何實現呢？
3、首先實現小盒子S的位置變化：調用盒子A的onmousemove函數，傳入參數client，表示時間鼠標在盒子A上移動。我們通過client獲取鼠標的位置(clientX，clientY)，然后通過(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)可獲得鼠標在圖像上的相對坐標，通過此值減去盒子S的寬度、高度的一半即可獲得盒子S在A中的位置。
但是要注意，記得為盒子S設置邊界，當橫坐標為0或為A盒子寬度、縱坐標為0或者A盒子高度時，要使其坐標固定。
4、接著實現盒子B中的圖像會成為盒子S覆蓋圖像的放大版：我們首先來思考一個問題，這個放大效果如何才能實現呢？ 從我的實現角度出發，對于盒子B來說，它首先需要一個背景圖==盒子A中的圖像，然后將其放大某個倍數x，當盒子S移動時，改變B的background-position為y，達到放大+移動的效果。
5、最后一點，x和y的值是多少呢？（假定S、A、B均為等比例） x：將盒子B放大的倍數應該等同于A的大小除以S的大小，這樣能達到相同的圖像范圍。y：B移動時的距離變化應該示盒子S移動的距離*（盒子B的大小除以S的大小）。可以多加思考~
可能我的實現方法過程比較復雜，大家如果想到更好的方法可以留言呀
代碼如下：
<!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>
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
left: 180px;
top: 100px;
}
#box img {
width: 400px;
height: 300px;
border: 1px solid rgba(255, 255, 255, 0.7);
vertical-align: bottom;
}
#nav {
width: 480px;
height: 360px;
border: 1px solid rgba(255, 255, 255, 0.7);
position: absolute;
left: 582px;
top: 100px;
background-image: url(../img/morn.jpg);
background-repeat: no-repeat;
background-size: 250% 250%
}
#small {
width: 160px;
height: 120px;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div id="small"></div>
<img src="../img/morn.jpg" alt="">
</div>
<div id="nav"></div>
<script>
let box = document.getElementById("box");
let small = document.getElementById("small");
let nav = document.getElementById("nav");
box.onmousemove = function (client) {
let x = client.clientX - box.offsetLeft;
let y = client.clientY - box.offsetTop;
small.style.left = x - 80 + 'px';
small.style.top = y - 60 + 'px';
let dis_x = box.offsetLeft + box.offsetWidth - client.clientX;
let dis_y = box.offsetTop + box.offsetHeight - client.clientY;
nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
nav.style.backgroundPositionY = (60 - y) * 3 + 'px';
if (x - 80 < 0) {
small.style.left = 0;
nav.style.backgroundPositionX = 0;
}
if (dis_x <= 80) {
small.style.left = box.offsetWidth - 160 + 'px';
nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
}
if (y - 60 < 0) {
small.style.top = 0;
nav.style.backgroundPositionY = 0;
}
if (dis_y < 60) {
small.style.top = box.offsetHeight - 120 + 'px';
nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
}
small.style.backgroundColor = "rgba(135, 207, 235, 0.61)";
}
box.onmouseout = function () {
small.style.backgroundColor="transparent"
}
</script>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript怎么實現放大鏡效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
