JavaScript implémente l'effet d'une loupe (exemple de code)

Le contenu de cet article concerne la réalisation de l'effet de loupe en JavaScript (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Principe de mise en œuvre  : Utilisez 2 divs, qui agrandissent respectivement l'image et la petite image. Il doit y avoir un calque de masque sur la petite image, via Positionner le calque de masque pour positionner la position relative de la grande image, et le mouvement du calque de masque doit être dans la direction opposée au mouvement de la grande image

Clé  : Le rapport de taille de la grande image par rapport à la petite image Il doit être le même que la taille du calque de masque et le rapport de la zone d'affichage agrandie

Difficulté : Calculer la position du ; calque de masque pour afficher la grande image correspondante

Sans plus tard, regardons simplement le code

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);
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!