Comment créer un effet de loupe pour les détails du produit JD-js tutoriel-php.cn

Comment créer un effet de loupe pour les détails du produit JD

php中世界最好的语言

Libérer： 2018-03-14 14:48:02

original

2553 Les gens l'ont consulté

JingdongEffet loupe

Comment créer un effet de loupe pour les détails du produit JD

Principaux points de connaissance de la mise en œuvre de la loupe

Manipulation du DOM en javascript.
L'acquisition du temps en JavaScript inclut principalement les événements mouseenter, mouseleave et onmousemove lorsque la souris se déplace sur la photo, ainsi que les attributs clientY, clientX et acquisition dans l'objet événement .Largeur de l'élément offsetWidth, offsetHight, etc.
Il est préférable de considérer le positionnement absolu et le calcul du grossissement qui y est utilisé (la surface de la zone agrandie dans le petit cadre/la surface de . le petit cadre) = (zone du grand cadre/zone de la grande photo dans le grand panier) //Le principe de la grande photo est de la mettre dans le grand cadre, et de définir le style css du grand cadre sur débordement : caché, afin que la surface de votre petit panier puisse être proportionnelle. Affiché dans un grand cadre.

L'implémentation spécifique du code est la suivante

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;            }
            #small{                float: left;                width:450px;                height:450px;                border: 1px solid black;                margin-left: 100px;                position:absolute;            }
            #big{                float: left;                width:600px;                height:600px;                overflow: hidden;                border: 1px solid black;                position: absolute;                left:600px;                top: 0px;            }
            #magnifying{                width: 200px;                height:200px;                background-color: cornflowerblue;                opacity: 0.4;                left: 0px;                top: 0px;                position: absolute;            }
            #bigImg{                position: absolute;                width: 1350px;                height:1350px;            }
        </style>
    </head>
    <body>
        <p id="small">
            <img  src="img/1.png" / alt="Comment créer un effet de loupe pour les détails du produit JD" >//记得将其设置与小框大小一致            <p id="magnifying"></p>
        </p>
        <p id="big">
            <img  src="img/2.jpg" id="bigImg" / alt="Comment créer un effet de loupe pour les détails du produit JD" >
        </p>
        <script type="text/javascript">
            var small=document.getElementById("small");            var magnifying=document.getElementById("magnifying");            var big=document.getElementById("big");            var bigImg=document.getElementById("bigImg");

            small.onmouseenter=function(){
                magnifying.style.display="block";
                bigImg.style.display="block"
            }
            small.onmouseleave=function(){
                magnifying.style.display="none";
                bigImg.style.display="none";
            }
            small.onmousemove=function(event){
                var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2;                var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2;                var leftMax=small.offsetWidth-magnifying.offsetWidth;                var topMax=small.offsetHeight-magnifying.offsetHeight;                //限制鼠标移动的区域
                left = left<=0 ? 0 : left;
                top = top <=0? 0:top;                //限制右边界与下边界
                left =left>=leftMax?leftMax:left;
                top =top>=topMax?topMax:top;

                magnifying.style.left=left+"px";
                magnifying.style.top=top+"px";                //核心代码
                var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth);                var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
                bigImg.style.left=imgLef+"px";
                bigImg.style.top=imgTop+"px";
            }        </script>
    </body></html>

Copier après la connexion

De cette façon, l'effet d'amplification pourra être obtenu. J'espère que cela pourra être utile à tout le monde. .

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du modèle de constructeur des modèles de conception JS

Pourquoi le front-end devrait-il utiliser la modularité ?

Solution frontale Web aux problèmes de compatibilité des navigateurs

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!