怎么用javascript實現放大鏡效果

今天小編給大家分享一下怎么用javascript實現放大鏡效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

先來看一下效果:

圖中的圖片選的不是很好,有些糊了,各位可以重新選擇圖片進行做放大鏡案例

這個案例可以分為三個功能模塊

1.鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
2.黃色的遮擋層跟隨鼠標功能。
3.移動黃色遮擋層，大圖片跟隨移動功能。 

這是我們的html主體部分:

<div class="product_intro clearfix">
            <!-- 預覽區域 -->
            <div class="preview_wrap fl">
                <div class="preview_img">
                    <img src="img/big5.jpg" class="smallImg">
                    <div class="mask">
 
                    </div>
                    <div class="big">
                        <img src="img/big5.jpg" class="bigImg">
                    </div>
                </div>
     </div>
</div>

接下來是css樣式部分，這里要注意放大鏡部分大圖和小圖部分的隱藏雨顯示以及定位問題

.preview_wrap {
      width: 400px;
      height: 590px;
            }
 
.preview_img {
      position: relative;
      height: 398px;
      border: 1px solid #CCCCCC;
      background-color: pink;text-align: center;
                
            }
 
.preview_img .smallImg {
      margin-top: 25%;
      width: 200px;
            }
 
.mask {
        display: none;
        position: absolute;
        top: left: 0;
        width: 300px;
        height: 300px;
        background-color: yellow;
       opacity: .5;
       border: 1px solid #CCCCCC;
        cursor: move;
 }
 
.big {
       display: none;
       position: absolute;
       left: 410px;
       top: 0;
       width: 500px;
       height: 500px;
       z-index: 999;
       border: 1px solid #ccc;
       overflow: hidden;
}

.big img {
       position: absolute;
       top: 0;
       left: 0;
}

最后來看javascript部分:

如果重新連接一個javascript頁面的話要記得寫好<script src="" type="text/javascript" ></script>

并且要加上window.addEventListener('load', function() {},它的作用是當頁面全部加載執行完畢后再執行js代碼

接下來是代碼步驟及思路,并且在js代碼里也會標注好

1.鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能,就是顯示與隱藏
2.鼠標移動的時候,讓黃色的盒子跟著鼠標來走
3.把鼠標坐標給遮擋層不合適。因為遮當層坐標以父盒子為準。
4.首先是獲得鼠標在盒子的坐標
5.之后把數值給遮擋層做為left和top值。盒子高度 300的一半 150
6.此時用到鼠標移動事件，但是還是在小圖片盒子內移動。mask移動的距離
7.遮擋層不能超出小圖片盒子范圍
8.大圖片的移動距離=遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離

// 整個案例可以分為三個功能模塊
// 鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
// 黃色的遮擋層跟隨鼠標功能。
// 移動黃色遮擋層，大圖片跟隨移動功能。
 
// 1.鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
// 就是顯示與隱藏
 
// 當頁面全部加載執行完畢后再執行js代碼
window.addEventListener('load', function() {
            var preview_img = document.querySelector('.preview_img');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            //2.當我們鼠標經過 preview_img 就顯示和隱藏mask遮擋層和 big 大盒子
            preview_img.addEventListener('mouseover', function() {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            preview_img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
 
            // 黃色的遮擋層跟隨鼠標功能。
            // 把鼠標坐標給遮擋層不合適。因為遮當層坐標以父盒子為準。
            // 首先是獲得鼠標在盒子的坐標
            // 之后把數值給遮擋層做為left和top值。
            // 此時用到鼠標移動事件，但是還是在小圖片盒子內移動。
 
            // 2.鼠標移動的時候,讓黃色的盒子跟著鼠標來走
            preview_img.addEventListener('mousemove', function(e) {
                //(1).先計算出鼠標在盒子里的坐標
                // 先算出鼠標在頁面中的坐標,減去盒子距離左側的距離,就是鼠標在盒子里的坐標
                // 但是這里要注意:
                // 要看他有沒有父元素,并且父元素有沒有定位
 
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // console.log(x,y)
                //(2)盒子高度 300的一半 150
                // (3)mask移動的距離
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
 
                // (4)遮擋層不能超出小圖片盒子范圍
                // 如果小于0,就把坐標設置為0
 
                //遮擋層的最大一定距離,因為都是正方形,所以高也適用
                var maskMax = preview_img.offsetWidth - mask.offsetWidth;
                if (maskX <= 0) {
                    maskX = 0
                    //如果大于遮擋層最大的移動距離，就把坐標設置為最大的移動距離
                    //遮擋層的最大移動距離:小圖片盒子寬度減去遮擋層盒子寬度
                } else if (maskX >= maskMax) {
                    maskX = maskMax;
                }
                if (maskY <= 0) {
                    maskY = 0;
                    //如果大于遮擋層最大的移動距離，就把坐標設置為最大的移動距離
                    //遮擋層的最大移動距離:小圖片盒子寬度減去遮擋層盒子寬度
                } else if (maskY >= maskMax) {
                    maskY = maskMax;
                }
 
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
 
 
                // 移動黃色遮擋層, 大圖片跟隨移動功能
                // 求大圖片的移動距離公式:
                //     遮擋層移動距離 / 遮擋層最大移動距離 = 大圖片移動距離 / 大圖片最大移動距離
                // 3.大圖片的移動距離=遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離
                var bigImg = document.querySelector('.bigImg'); //大圖
                //大圖片最大移動距離
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                //大圖片最大移動距離
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
 })

以上就是“怎么用javascript實現放大鏡效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。