快捷導(dǎo)航

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來(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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: