JavaScript如何制作放大鏡效果？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括猇亭網(wǎng)站建設(shè)、猇亭網(wǎng)站制作、猇亭網(wǎng)頁(yè)制作以及猇亭網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，猇亭網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到猇亭省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

實(shí)現(xiàn)原理：使用2個(gè)div，里面分別放大圖片和小圖片，在小圖片上應(yīng)該還有一個(gè)遮罩層，通過(guò)定位遮罩層的位置來(lái)定位大圖片的相對(duì)位置，而且，遮罩層的移動(dòng)應(yīng)該和大圖片的移動(dòng)方向相反

關(guān)鍵： 大圖片和小圖片大小比例應(yīng)該和遮罩層的大小和放大顯示區(qū)域的比例相同；

難點(diǎn)： 計(jì)算遮罩層來(lái)顯示相應(yīng)大圖片的位置

話不多說(shuō)直接看代碼

代碼

html：

<div id="small">
    <div id="pic1">
        <img src="62-130501163925.jpg" alt="">
    </div>
    <div id="mask"></div>
</div>
<div id="big">
    <div id="pic2">
        <img src="62-130501163925.jpg" alt="">
    </div>
</div>

css

#small{
    width: 500px;
    height: 312px;
    position: absolute;
    left: 20px;
    top: 20px;
}
#pic1{
    position: absolute;
    left: 0px;
    top: 0px;
}
#pic1 img{
    width: 100%;
    height: 100%;
}
#big{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 50px;
    top: 50px;
    border: 1px solid blue;
    overflow: hidden;
}
#pic2{
    width: 1000px;
    height: 625px;
    position: absolute;
    left: 0;
    top: 0;
}
#pic2 img{
    width: 100%;
    height: 100%;
}
#mask{
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.3;/*讓遮罩層看起來(lái)透明*/
    filter: alpha(opacity = 30);/*兼容不同的瀏覽器*/
    position: absolute;
    display: none;
}

js

window.onload = function(){//文檔內(nèi)容加載完之后再執(zhí)行
    //當(dāng)鼠標(biāo)移入小圖片，顯示遮罩層和放大的區(qū)域
    $('small').onmouseenter = function(){
        $('mask').style.display = 'block';
        $('big').style.display='block';
    }
        //鼠標(biāo)移出時(shí)，隱藏遮罩層和放大的區(qū)域
    $('small').onmouseleave = function(){
        $('mask').style.display='none';
        $('big').style.display="none";
    }
    //鼠標(biāo)移動(dòng)
    $('small').onmousemove = function(ev){
        var e = ev || window.event;
        //計(jì)算鼠標(biāo)的位置，并讓鼠標(biāo)顯示在遮罩層的中間
        var l = e.clientX - $('small').offsetLeft - 50;
        var t = e.clientY - $('small').offsetTop -50;
        //別讓遮罩層移出圖片
        if(l <= 0){
            l = 0;
        }
        if(l >= 500 - 100){
            l = 400;
        }
        if(t <= 0){
            t = 0;
        }
        if(t >= 312 - 100){
            t = 212;
        }
        //遮罩層的移動(dòng)
        $('mask').style.left = l + 'px';
        $('mask').style.top = t + 'px';
        //通過(guò)遮罩層移動(dòng)，來(lái)計(jì)算出放大后圖片的顯示區(qū)域
        $("pic2").style.left = -$("mask").offsetLeft * 2 + 'px';
        $("pic2").style.top = -$("mask").offsetTop * 2 + 'px';
    }
}
//為了更容容易的獲取id
function $(id){
    return document.getElementById(id);
}

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)JavaScript如何制作放大鏡效果大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：JavaScript如何制作放大鏡效果
本文來(lái)源：http://chinadenli.net/article12/jgjhgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、用戶體驗(yàn)、App設(shè)計(jì)、響應(yīng)式網(wǎng)站、小程序開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)