欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javaScript實現(xiàn)放大鏡特效

 更新時間：2021年11月09日 08:36:24   作者：雪旭  
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)放大鏡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

要實現(xiàn)的效果：鼠標放到小圖片上小圖片上方會出現(xiàn)一個小塊，這個小塊里面的區(qū)域會放大顯示到右邊大圖里面（如下圖所示）

這個效果主要用到的是：鼠標的坐標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部分：

鼠標移入放大鏡（小圖上的小塊）顯示，右邊大圖顯示

//最大的容器
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";
}

鼠標在小圖上移動時放大鏡跟隨移動，用event對象的event.clientX,和event.clientY來獲取鼠標的坐標。

通過event.clientX和event.clientY可以得到鼠標的位置，父容器的偏移量,發(fā)大鏡的偏移量（實際項目中可能會給發(fā)大鏡設置偏移量，為了去掉這個偏移量的影響要減去這個偏移量），放大鏡效果中鼠標一直都在小塊的中間位置，所以移動的位置就可以了這樣去的。

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'

       }

到這一步放大鏡就會跟隨鼠標移動了，還要加個范圍限定，不然發(fā)大鏡移動距離就會超過小圖片了

范圍限定

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'

       }

放大鏡跟隨鼠標移動實現(xiàn)之后，接下來就需要實現(xiàn)發(fā)大鏡移動時，大圖也跟著移動（大圖移動的方向是相反的），發(fā)大鏡移動的距離與大圖移動的距離是成正比的，小圖的寬度與大圖片（包過未顯示部分）的寬度也是成正比的，小圖可以移動動的最大距離和大圖可以動的最大距離也是成正比的，所以可以通過這二個公式求得大圖應該移動多少。

放大鏡移動的距離/小圖的寬度=大圖移動的距離/大圖的寬度  這個公式雖然可以實現(xiàn)但是沒有限定最大可移動距離會出現(xiàn)這種效果

所以這個公式里要這樣寫最好放大鏡移動的距離/小圖的寬度-放大鏡的寬度（這是放大鏡最大的移動范圍）

放大鏡移動的距離/（小圖的寬度-放大鏡的寬度）=大圖移動的距離/（大圖的寬度-大圖顯示區(qū)域）

注意大圖移動的方向與放大鏡移動的方向是相反的！

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最大移動位置
            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";
       }

全部代碼：

<!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最大移動位置
            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>

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

相關文章

  • IE瀏覽器中圖片onload事件無效的解決方法

    IE瀏覽器中圖片onload事件無效的解決方法

    在做一個項目的時候才發(fā)現(xiàn)的這個bug，其實這是一個很常見的問題，只是之前對圖片的處理太少，沒有碰到過。
    2014-04-04
  • 基于JavaScript實現(xiàn)手機短信按鈕倒計時(超簡單)

    基于JavaScript實現(xiàn)手機短信按鈕倒計時(超簡單)

    在淘寶等購物網(wǎng)站，我們都會看到一個發(fā)送短信倒計時的按鈕，究竟是如何實現(xiàn)的呢？下面小編通過本篇文章給大家分享一段代碼關于js實現(xiàn)手機短信按鈕倒計時，需要的朋友參考下
    2015-12-12
  • JavaScript入門教程之引用類型

    JavaScript入門教程之引用類型

    引用類型是一種數(shù)據(jù)結(jié)構，用于將數(shù)據(jù)和功能組織在一起。這篇文章主要介紹了JavaScript入門教程之引用類型的相關資料，需要的朋友一起學習吧
    2016-05-05
  • Javascript實現(xiàn)簡易導航欄

    Javascript實現(xiàn)簡易導航欄

    這篇文章主要為大家詳細介紹了Javascript實現(xiàn)簡易導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-06-06
  • js圖片輪播插件的封裝

    js圖片輪播插件的封裝

    這篇文章主要為大家詳細介紹了js圖片輪播插件的封裝代碼，只需要獲取到圖片和按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • 使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點

    使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點

    這篇文章主要介紹了使用JavaScript在html文檔內(nèi)添加新的元素節(jié)，主要打方式就是動態(tài)的改變原有html文檔結(jié)構，下文詳細介紹內(nèi)容需要的可以參考一下
    2022-02-02
  • javascript實現(xiàn)簡單下拉菜單效果

    javascript實現(xiàn)簡單下拉菜單效果

    這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一
    2022-08-08
  • 非常不錯的功能強大代碼簡單的管理菜單美化版

    非常不錯的功能強大代碼簡單的管理菜單美化版

    由于網(wǎng)盤不穩(wěn)定,很多時候文件提示找不到，幸好U盤里存了. 喜歡這3個風格的朋友們別在PM我啦.....我把文件傳到我服務器上了..
    2008-07-07
  • js中鍵盤事件實例簡析

    js中鍵盤事件實例簡析

    這篇文章主要介紹了js中鍵盤事件,以一個較為簡單的實例形式分析了js響應鍵盤事件的操作技巧,需要的朋友可以參考下
    2015-01-01
  • 微信小程序倒計時功能實例代碼

    微信小程序倒計時功能實例代碼

    這篇文章主要介紹了微信小程序倒計時功能實例代碼,當單擊按鈕彈出一個半透明的彈出層，在規(guī)定時間內(nèi)激活關閉按鈕，關閉彈出層。需要的朋友可以參考下
    2018-07-07

最新評論