- 所在位置：
- 首頁(yè) >
- 編程技術(shù) >
- JavaScript >
- 如何利用JS寫(xiě)一個(gè)簡(jiǎn)單的放大鏡特效，代碼是什么
如何利用JS寫(xiě)一個(gè)簡(jiǎn)單的放大鏡特效，代碼是什么
Admin 2022-07-06 群英技術(shù)資訊 857 次瀏覽
很多朋友都對(duì)“如何利用JS寫(xiě)一個(gè)簡(jiǎn)單的放大鏡特效，代碼是什么”的內(nèi)容比較感興趣，對(duì)此小編整理了相關(guān)的知識(shí)分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲，那么感興趣的朋友就繼續(xù)往下看吧！要實(shí)現(xiàn)的效果：鼠標(biāo)放到小圖片上小圖片上方會(huì)出現(xiàn)一個(gè)小塊，這個(gè)小塊里面的區(qū)域會(huì)放大顯示到右邊大圖里面（如下圖所示）
這個(gè)效果主要用到的是：鼠標(biāo)的坐標(biāo)e.clientX，e.clientY,偏移量offsetLeft，offsetTop,offsetWidth,sffsetHeight等屬性。
HTML和CSS代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#2c3e50;
}
.wrap{
display: flex;
position: relative;
left: 200px;
top: 30px;
}
.small{
width: 500px;
height: 300px;
border-radius: 20px;
overflow: hidden;
position: relative;
left: 0px;
}
.small img{
width: 100%;
height: 100%;
}
.small span{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: rgba(0,0,0,0.5);
cursor: pointer;
z-index: 1;
}
.big{
display: none;
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
left: 50px;
top: 0;
}
.big img{
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="small">
<img src="img/33.jpg" alt="">
<span></span>
</div>
<div class="big">
<img src="img/33.jpg" alt="">
</div>
</div>
</body>
</html>
JS部分：
鼠標(biāo)移入放大鏡（小圖上的小塊）顯示，右邊大圖顯示
//最大的容器
let wrap=document.querySelector('.wrap');
//小圖部分
let smallWrap=document.querySelector('.wrap .small');
let smallImg=document.querySelector('.wrap .small img');
let smallBox=document.querySelector('.wrap .small span');
//大圖部分
let bigBox=document.querySelector('.wrap .big');
let bigImg=document.querySelector('.wrap .big img');
smallWrap.onmouseover=function(){
smallBox.style.display="block";
bigBox.style.display="block";
}
鼠標(biāo)在小圖上移動(dòng)時(shí)放大鏡跟隨移動(dòng)，用event對(duì)象的event.clientX,和event.clientY來(lái)獲取鼠標(biāo)的坐標(biāo)。
通過(guò)event.clientX和event.clientY可以得到鼠標(biāo)的位置，父容器的偏移量,發(fā)大鏡的偏移量（實(shí)際項(xiàng)目中可能會(huì)給發(fā)大鏡設(shè)置偏移量，為了去掉這個(gè)偏移量的影響要減去這個(gè)偏移量），放大鏡效果中鼠標(biāo)一直都在小塊的中間位置，所以移動(dòng)的位置就可以了這樣去的。
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
}
到這一步放大鏡就會(huì)跟隨鼠標(biāo)移動(dòng)了，還要加個(gè)范圍限定，不然發(fā)大鏡移動(dòng)距離就會(huì)超過(guò)小圖片了
范圍限定
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
//范圍限定方法一
/* if(moveX<0){
moveX=0;
}else if(moveX>=maxX){
moveX=maxX
}
if(moveY<0){
moveY=0;
}else if(moveY>=maxY){
moveY=maxY
} */
//范圍限定方法二
moveX=Math.min(maxX,Math.max(0,moveX))
moveY=Math.min(maxY,Math.max(0,moveY))
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
}
放大鏡跟隨鼠標(biāo)移動(dòng)實(shí)現(xiàn)之后，接下來(lái)就需要實(shí)現(xiàn)發(fā)大鏡移動(dòng)時(shí)，大圖也跟著移動(dòng)（大圖移動(dòng)的方向是相反的），發(fā)大鏡移動(dòng)的距離與大圖移動(dòng)的距離是成正比的，小圖的寬度與大圖片（包過(guò)未顯示部分）的寬度也是成正比的，小圖可以移動(dòng)動(dòng)的最大距離和大圖可以動(dòng)的最大距離也是成正比的，所以可以通過(guò)這二個(gè)公式求得大圖應(yīng)該移動(dòng)多少。
放大鏡移動(dòng)的距離/小圖的寬度=大圖移動(dòng)的距離/大圖的寬度 這個(gè)公式雖然可以實(shí)現(xiàn)但是沒(méi)有限定最大可移動(dòng)距離會(huì)出現(xiàn)這種效果
所以這個(gè)公式里要這樣寫(xiě)最好放大鏡移動(dòng)的距離/小圖的寬度-放大鏡的寬度（這是放大鏡最大的移動(dòng)范圍）
放大鏡移動(dòng)的距離/（小圖的寬度-放大鏡的寬度）=大圖移動(dòng)的距離/（大圖的寬度-大圖顯示區(qū)域）
注意大圖移動(dòng)的方向與放大鏡移動(dòng)的方向是相反的！
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
//范圍限定方法一
/* if(moveX<0){
moveX=0;
}else if(moveX>=maxX){
moveX=maxX
}
if(moveY<0){
moveY=0;
}else if(moveY>=maxY){
moveY=maxY
} */
//范圍限定方法二
moveX=Math.min(maxX,Math.max(0,moveX))
moveY=Math.min(maxY,Math.max(0,moveY))
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth最大移動(dòng)位置
let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);
bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
}
最后再加上鼠標(biāo)移出事件，鼠標(biāo)移出，放大鏡和大圖隱藏
smallWrap.onmouseout=function(){
smallBox.style.display="none";
bigBox.style.display="none";
}
全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#2c3e50;
}
.wrap{
display: flex;
position: relative;
left: 200px;
top: 30px;
}
.small{
width: 500px;
height: 300px;
border-radius: 20px;
overflow: hidden;
position: relative;
left: 100px;
}
.small img{
width: 100%;
height: 100%;
}
.small span{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: rgba(0,0,0,0.5);
cursor: pointer;
z-index: 1;
}
.big{
display: none;
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
left: 120px;
top: 0;
}
.big img{
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="small">
<img src="img/33.jpg" alt="">
<span></span>
</div>
<div class="big">
<img src="img/33.jpg" alt="">
</div>
</div>
<script>
//最大的容器
let wrap=document.querySelector('.wrap');
//小圖部分
let smallWrap=document.querySelector('.wrap .small');
let smallImg=document.querySelector('.wrap .small img');
let smallBox=document.querySelector('.wrap .small span');
//大圖部分
let bigBox=document.querySelector('.wrap .big');
let bigImg=document.querySelector('.wrap .big img');
smallWrap.onmouseover=function(){
smallBox.style.display="block";
bigBox.style.display="block";
}
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
//范圍限定方法一
/* if(moveX<0){
moveX=0;
}else if(moveX>=maxX){
moveX=maxX
}
if(moveY<0){
moveY=0;
}else if(moveY>=maxY){
moveY=maxY
} */
//范圍限定方法二
moveX=Math.min(maxX,Math.max(0,moveX))
moveY=Math.min(maxY,Math.max(0,moveY))
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth最大移動(dòng)位置
let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);
bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
}
smallWrap.onmouseout=function(){
smallBox.style.display="none";
bigBox.style.display="none";
}
</script>
</body>
</html>到此這篇關(guān)于“如何利用JS寫(xiě)一個(gè)簡(jiǎn)單的放大鏡特效，代碼是什么”的文章就介紹到這了,更多相關(guān)如何利用JS寫(xiě)一個(gè)簡(jiǎn)單的放大鏡特效，代碼是什么內(nèi)容，歡迎關(guān)注群英網(wǎng)絡(luò)技術(shù)資訊頻道，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
JS如何進(jìn)行按位取反計(jì)算？一文帶你看懂步驟
JS如何進(jìn)行按位取反計(jì)算？一些朋友可能不是了解什么是按位取反運(yùn)算，按位取反運(yùn)算的時(shí)候,計(jì)算機(jī)會(huì)將操作數(shù)所對(duì)應(yīng)的二進(jìn)制表達(dá)式的每一個(gè)位進(jìn)行取反計(jì)算,取反后所得到的值就是~按位取反的運(yùn)算結(jié)果。那么JavaScript中如何來(lái)實(shí)現(xiàn)呢？下面我們一起來(lái)看看。
-
puppeteer庫(kù)如何安裝和使用，能用做什么？
這篇我們來(lái)了解Node.js中puppeteer庫(kù)如何安裝和使用，以及能用做什么？文中的介紹很詳細(xì)，有具體示例供大家參考，對(duì)大家學(xué)習(xí)和了解puppeteer庫(kù)的使用有幫助，感興趣的朋友就繼續(xù)往下看吧。
-
用JS實(shí)現(xiàn)自適應(yīng)的輸入框的思路和方法是什么
目錄實(shí)現(xiàn)源碼大概思路文字內(nèi)容寬度細(xì)節(jié)處理實(shí)現(xiàn)源碼// 常見(jiàn)一個(gè)輔助元素const fakeEle = document.createElement(div);// 隱藏輔助元素fakeEle.style.position = absolute;fakeEle.style.left = -9999px;fakeEle.s
-
Vue3下style CSS變量注入怎樣實(shí)現(xiàn)？一文帶你看懂
Vue3下style CSS變量注入怎樣實(shí)現(xiàn)？一些朋友可能對(duì)CSS變量注入的內(nèi)容不是很了解，對(duì)此本文就給大家來(lái)介紹一下CSS變量注入，下文有示例及詳細(xì)的介紹，感興趣的朋友就繼續(xù)往下看吧。
-
匯總vue傳值方式及代碼示例
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
推薦內(nèi)容
- CSS中flex布局如何實(shí)現(xiàn)自動(dòng)換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計(jì)算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實(shí)現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計(jì)串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對(duì)象數(shù)組賦值？this.$set方法幫你解決
相關(guān)標(biāo)簽
- 前后端端口不一致
- 在CentOS,tomcat集群
- windows10更改文件類(lèi)型
- 任務(wù)管理器啟動(dòng)項(xiàng)
- 網(wǎng)站關(guān)鍵詞排名下降
- PHP Math函數(shù)
- 微信小程序列表移動(dòng)
- ansible
- yield的作用
- win10圖片查看器沒(méi)了
- MongoDB索引
- munch庫(kù)的作用
- win11 wsa
- ElementUI表格列表分頁(yè)
- win11鎖屏壁紙
- php多進(jìn)程
- javascript引用對(duì)象
- MongoDB 索引
- UDF
- Laravel目錄結(jié)構(gòu)
- phpstrom快捷鍵
成為群英會(huì)員,開(kāi)啟智能安全云計(jì)算之旅
立即注冊(cè)友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評(píng)測(cè) idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫(kù)博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時(shí)售前：400-678-4567
7x24小時(shí)售后：0668-2555666
24小時(shí)QQ客服
群英微信公眾號(hào)
CNNIC域名投訴舉報(bào)處理平臺(tái)
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營(yíng)許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號(hào) 域名注冊(cè)商資質(zhì) 粵 D3.1-20240008
