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

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

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

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

效果

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

效果圖如下：

核心思路

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

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

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

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

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)進(jìn)入和離開圖片
        box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }

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

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

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

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

2.計(jì)算出小盒子在圖片時(shí)，自身的中心點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

高度也是一樣的

因?yàn)?，是鼠?biāo)移動(dòng)觸發(fā)，所以實(shí)時(shí)刷新

調(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)整框的大小，或放大比例時(shí)，改變這兩個(gè)樣式的寬高即可

內(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)進(jìn)入和離開圖片
        box1.onmouseenter=function(){
            box2.style.display='block'
        }
        box1.onmouseleave=function(){
            box2.style.display='none'
        }
        // 鼠標(biāo)在圖片上移動(dòng)觸發(fā)事件
        box1.onmousemove=function(e){
            // 算出小盒子在圖片的中心點(diǎn)
           var x=e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y=e.pageY-box1.offsetTop-yellow.offsetHeight/2
 
 
        //    判斷小盒子是否超出img范圍，使黃色小盒子不能超出img范圍
           if(x<0){
            //    此時(shí)的0不是圖片的左側(cè)，而是小盒子在最左邊時(shí)，小盒子的中心點(diǎn)
               x=0
           }else if(x>box1.offsetWidth-yellow.offsetWidth){
            //    小盒子的X軸中心點(diǎn)大于圖片盒子的寬度減去自身寬度時(shí)，說明超出，則始終等于圖片盒子的寬度減去自身寬度
            x=box1.offsetWidth-yellow.offsetWidth
           }
 
        //    同上
           if(y<0){
               y=0
           }else if(y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
 
        //    給黃色小盒子賦值，讓黃色小盒子跟隨鼠標(biāo)移動(dòng)
           yellow.style.left=x+'px'
           yellow.style.top=y+'px'
 
 
        //    通過計(jì)算，得出小盒子在圖片移動(dòng)多少，顯示區(qū)就移動(dòng)多少的比例
           srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
           srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
 
        //    計(jì)算黃色小盒子在圖片上的大小
           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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: