javaScript實(shí)現(xiàn)放大鏡特效
更新時(shí)間：2021年11月09日 08:36:24 作者：雪旭
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
要實(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來獲取鼠標(biāo)的坐標(biāo)。
通過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ì)超過小圖片了
范圍限定
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)之后，接下來就需要實(shí)現(xiàn)發(fā)大鏡移動(dòng)時(shí)，大圖也跟著移動(dòng)（大圖移動(dòng)的方向是相反的），發(fā)大鏡移動(dòng)的距離與大圖移動(dòng)的距離是成正比的，小圖的寬度與大圖片（包過未顯示部分）的寬度也是成正比的，小圖可以移動(dòng)動(dòng)的最大距離和大圖可以動(dòng)的最大距離也是成正比的，所以可以通過這二個(gè)公式求得大圖應(yīng)該移動(dòng)多少。
放大鏡移動(dòng)的距離/小圖的寬度=大圖移動(dòng)的距離/大圖的寬度 這個(gè)公式雖然可以實(shí)現(xiàn)但是沒有限定最大可移動(dòng)距離會(huì)出現(xiàn)這種效果
所以這個(gè)公式里要這樣寫最好放大鏡移動(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們?cè)谌粘ｉ_發(fā)過程中經(jīng)常會(huì)用到JavaScript語言在前端代碼中,進(jìn)行日期的選擇,下面這篇文章主要給大家介紹了關(guān)于如何在JavaScript中比較日期的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來，以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪，加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問題2011-10-10
JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫avaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
基于js實(shí)現(xiàn)checkbox批量選中操作
這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)checkbox批量選中操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
不用一句js代碼初始化組件，是不是很神奇？2016-01-01
Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
一個(gè)比較特殊的客戶要求，在一個(gè)頁面用表格顯示數(shù)據(jù)，數(shù)據(jù)量不是很多，不希望使用瀏覽器的滾動(dòng)條，只能在Div中滾動(dòng)table中的數(shù)據(jù)，但是有個(gè)特殊的要求，就是必須將滾動(dòng)條自動(dòng)滾動(dòng)到底部2012-03-03
這篇文章主要介紹了js創(chuàng)建對(duì)象的方式,實(shí)例總結(jié)了3種常用的創(chuàng)建對(duì)象的方式,非常實(shí)用,需要的朋友可以參考下2015-01-01
javascript 使用sleep函數(shù)的常見方法詳解
這篇文章主要介紹了javascript 使用sleep函數(shù)的常見方法,結(jié)合實(shí)例形式分析總結(jié)了javascript sleep函數(shù)的功能、常見使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了原生JS實(shí)現(xiàn)的輪播圖功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)輪播圖的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08
javascript實(shí)現(xiàn)計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03