js實現(xiàn)簡單的放大鏡效果

更新時間：2021年09月07日 11:23:19 作者：LZC_yEllOwBooK

這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的放大鏡效果，可隨意更改，放大區(qū)域的大小、比例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)簡單放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

效果

效果，鼠標(biāo)在原圖片移動，黃色小盒子跟隨鼠標(biāo)移動，黃色小盒子蓋住的部分，在顯示區(qū)顯示

效果圖如下：

核心思路

1.鼠標(biāo)放置在圖片上，顯示區(qū)出現(xiàn)，鼠標(biāo)離開小盒子，顯示區(qū)消失

2.鼠標(biāo)在圖片上移動時，小盒子跟隨鼠標(biāo)移動，且鼠標(biāo)在黃色小盒子中間位置

3.小盒子給判斷，讓其不能超出圖片區(qū)域

4.小盒在圖片上移動多少，顯示區(qū)域要移動同比例的距離

5.當(dāng)顯示區(qū)大小發(fā)生改變，或顯示區(qū)內(nèi)容增大變小，原來圖片上的黃色小盒子隨之改變

操作

1.先把需要用到元素獲取過來

 // 獲取頁面上我們需要的元素
        var box1=document.querySelector('.box1')
        var yellow=document.querySelector('.yellow')
        var box2=document.querySelector('#rightbox')
        var screen=rightbox.children[0]

2.鼠標(biāo)放置到圖片，顯示區(qū)域出現(xiàn)，離開則消失

// 鼠標(biāo)進入和離開圖片
        box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }

利用鼠標(biāo)的進入和離開事件就可以做到，分別設(shè)置出現(xiàn)和不出現(xiàn)就好了

3.鼠標(biāo)移動，小盒子跟隨移動，且鼠標(biāo)在黃色小盒子中間

box1.onmousemove=function(e){
          // 算出小盒子在圖片時，自身的中心點
           var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
         //    給黃色小盒子賦值，讓黃色小盒子跟隨鼠標(biāo)移動
         yellow.style.left=x+'px'
           yellow.style.top=y+'px'
        }

1.使用事件，鼠標(biāo)在圖片上每一棟一下就觸發(fā)，做到隨時刷新

2.計算出小盒子在圖片時，自身的中心點

公式：（用鼠標(biāo)在頁面的位置，減去，圖片的偏移距離，減去自身的一半）

這里減去一半是保證鼠標(biāo)在黃色盒子位置始終保持居中

4.小盒子給判斷條件，讓黃色小盒子不能超出圖片區(qū)域

// 鼠標(biāo)在圖片上移動觸發(fā)事件
        box1.onmousemove=function(e){
            // 算出小盒子在圖片的中心點
           var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
 
   // --------------------------------------------------------------------------------
 // 新增部分
        //    判斷小盒子是否超出img范圍，使黃色小盒子不能超出img范圍
           if(x<0){
            //    此時的0不是圖片的左側(cè)，而是小盒子在最左邊時，小盒子的中心點
               x=0
           }else if(x>box1.offsetWidth-yellow.offsetWidth){
            //    小盒子的X軸中心點大于圖片盒子的寬度減去自身寬度時，說明超出，則始終等于圖片盒子的寬度減去自身寬度
            x=box1.offsetWidth-yellow.offsetWidth
           }
 
        //    同上
           if(y<0){
               y=0
           }else if(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
   // ---------------------------------------------------------------------------------
        //    給黃色小盒子賦值，讓黃色小盒子跟隨鼠標(biāo)移動
           yellow.style.left=x+'px'
           yellow.style.top=y+'px'

1.判斷小盒子的左邊是不是超出圖片部分，給的if（x<0）此時的0，還是以中心點來計算的

2.判斷右邊 x>box1.offsetWidth-yellow.offsetWidth

（是否大于圖片區(qū)域?qū)挾?nbsp; 減去小盒子寬度）

為什么是小盒子寬度，判定的是小盒子中心點，且0的位置是小盒子的中心點，已經(jīng)減去過一半的小盒子，所以右邊減去的就是小盒的一半*2

3.上下也一樣，這個時候黃色小盒子就不會超出圖片區(qū)域了

5.小盒在圖片上移動多少，顯示區(qū)域要移動同比例的距離

// 通過計算，得出小盒子在圖片移動多少，顯示區(qū)就移動多少的比例
 srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
 srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'

顯示區(qū)域移動的多少，取決于小盒子移動多少

小盒子移動的值除以圖片的寬度乘以顯示區(qū)域的寬度

顯示區(qū)域的移動值就可以和小盒子在圖片的移動比例相同

6.顯示區(qū)大小改變或顯示區(qū)內(nèi)容變化，圖片上黃色盒子隨之改變

 //  計算黃色小盒子在圖片上的大小
           yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }

計算方式為：黃色盒子的寬=圖片的寬/（顯示區(qū)域的內(nèi)容寬度/顯示區(qū)域的框的寬度）

高度也是一樣的

因為，是鼠標(biāo)移動觸發(fā)，所以實時刷新

調(diào)整

.img2{
            width: 3000px;
            height: 3000px;
            position: absolute;
        }
        #rightbox{
            position: absolute;
            top: 0;
            left: 650px;
            width: 900px;
            height: 900px;
            overflow: hidden;
            display: none;
        }

當(dāng)需要調(diào)整框的大小，或放大比例時，改變這兩個樣式的寬高即可

內(nèi)容，css，js 整體代碼

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .img1{
            width: 300px;
            height: 300px;
        }
        .img2{
            width: 3000px;
            height: 3000px;
            position: absolute;
        }
        #rightbox{
            position: absolute;
            top: 0;
            left: 650px;
            width: 900px;
            height: 900px;
            overflow: hidden;
            display: none;
        }
        .yellow{
            background-color: yellow;
            opacity: 0.5;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            position: relative;
            margin-left: 300PX;
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="./images/1.jpg" alt="" class="img1">
        <div class="yellow"></div>
    </div>
    <div id="rightbox">
        <img src="./images/1.jpg" alt="" class="img2">
    </div>
    <script>
        // 獲取頁面上我們需要的元素
        var box1=document.querySelector('.box1')
        var yellow=document.querySelector('.yellow')
        var box2=document.querySelector('#rightbox')
        var srceen=rightbox.children[0]
        // 鼠標(biāo)進入和離開圖片
        box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }
        // 鼠標(biāo)在圖片上移動觸發(fā)事件
        box1.onmousemove=function(e){
            // 算出小盒子在圖片的中心點
           var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
 
 
        //    判斷小盒子是否超出img范圍，使黃色小盒子不能超出img范圍
           if(x<0){
            //    此時的0不是圖片的左側(cè)，而是小盒子在最左邊時，小盒子的中心點
               x=0
           }else if(x>box1.offsetWidth-yellow.offsetWidth){
            //    小盒子的X軸中心點大于圖片盒子的寬度減去自身寬度時，說明超出，則始終等于圖片盒子的寬度減去自身寬度
            x=box1.offsetWidth-yellow.offsetWidth
           }
 
        //    同上
           if(y<0){
               y=0
           }else if(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
 
        //    給黃色小盒子賦值，讓黃色小盒子跟隨鼠標(biāo)移動
           yellow.style.left=x+'px'
           yellow.style.top=y+'px'
 
 
        //    通過計算，得出小盒子在圖片移動多少，顯示區(qū)就移動多少的比例
           srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
           srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
 
        //    計算黃色小盒子在圖片上的大小
           yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }
        
    </script>
</body>
</html>

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

您可能感興趣的文章: