JavaScript implementiert den Effekt einer Lupe (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Verwirklichung der Wirkung von Lupen in JavaScript (Codebeispiel). Ich hoffe, dass er für Sie hilfreich ist.

Implementierungsprinzip: Verwenden Sie 2 Divs, die das Bild bzw. das kleine Bild vergrößern. Auf dem kleinen Bild sollte sich eine Maskenebene befinden Positionieren Sie die Maskenebene, um die relative Position des großen Bildes zu positionieren, und die Bewegung der Maskenebene sollte in die entgegengesetzte Richtung zur Bewegung des großen Bildes erfolgen

Schlüssel : Die Größe Verhältnis des großen Bildes zum kleinen Bild Es sollte mit der Größe der Maskenebene und dem Verhältnis des vergrößerten Anzeigebereichs übereinstimmen

Schwierigkeit: Berechnen Sie die Position der Maske Ebene, um das entsprechende große Bild anzuzeigen

Schauen wir uns ohne weitere Umschweife einfach den Code an

Code

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;/*让遮罩层看起来透明*/
    filter: alpha(opacity = 30);/*兼容不同的浏览器*/
    position: absolute;
    display: none;
}

js

window.onload = function(){//文档内容加载完之后再执行
    //当鼠标移入小图片，显示遮罩层和放大的区域
    $('small').onmouseenter = function(){
        $('mask').style.display = 'block';
        $('big').style.display='block';
    }
        //鼠标移出时，隐藏遮罩层和放大的区域
    $('small').onmouseleave = function(){
        $('mask').style.display='none';
        $('big').style.display="none";
    }
    //鼠标移动
    $('small').onmousemove = function(ev){
        var e = ev || window.event;
        //计算鼠标的位置，并让鼠标显示在遮罩层的中间
        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;
        }
        //遮罩层的移动
        $(&#39;mask&#39;).style.left = l + &#39;px&#39;;
        $(&#39;mask&#39;).style.top = t + &#39;px&#39;;
        //通过遮罩层移动，来计算出放大后图片的显示区域
        $("pic2").style.left = -$("mask").offsetLeft * 2 + &#39;px&#39;;
        $("pic2").style.top = -$("mask").offsetTop * 2 + &#39;px&#39;;
    }
}
//为了更容容易的获取id
function $(id){
    return document.getElementById(id);
}

Das obige ist der detaillierte Inhalt vonJavaScript implementiert den Effekt einer Lupe (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!