Heim > Artikel > Web-Frontend > So erstellen Sie einen Lupeneffekt für JD-Produktdetails

So erstellen Sie einen Lupeneffekt für JD-Produktdetails

php中世界最好的语言Original: 2018-03-14 14:48:022505Durchsuche

Wichtige Wissenspunkte zur Implementierung von Lupen

DOM-Manipulation in Javascript.
Die Zeiterfassung in JavaScript umfasst hauptsächlich die Ereignisse „Mouseenter“, „Mouseleave“ und „Onmousemove“, wenn sich die Maus auf dem Foto bewegt, sowie die Attribute „clientY“, „clientX“ und „acquisition“ im Ereignisobjekt . Elementbreite offsetWidth, offsetHight usw.
Es ist am besten, die darin verwendete Vergrößerungsformel (die Fläche des vergrößerten Bereichs im kleinen Rahmen/die Fläche von ) zu berücksichtigen der kleine Rahmen) = (großer Rahmenbereich/Bereich des großen Fotos im großen Korb) // Das Prinzip eines großen Fotos besteht darin, es in einen großen Rahmen zu legen und den CSS-Stil des großen Rahmens auf festzulegen Überlauf: ausgeblendet, sodass der Bereich in Ihrem kleinen Warenkorb proportional in einem großen Rahmen angezeigt werden kann.

Die spezifische Code-Implementierung ist wie folgt

<!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="So erstellen Sie einen Lupeneffekt für JD-Produktdetails" >//记得将其设置与小框大小一致            <p id="magnifying"></p>
        </p>
        <p id="big">
            <img  src="img/2.jpg" id="bigImg" / alt="So erstellen Sie einen Lupeneffekt für JD-Produktdetails" >
        </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>

Auf diese Weise kann der Verstärkungseffekt erzielt werden, der für alle hilfreich sein kann .

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erklärung des Konstruktormusters von JS-Entwurfsmustern

Warum sollte das Frontend Modularität verwenden? ?

Web-Frontend-Lösung für Browser-Kompatibilitätsprobleme

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Lupeneffekt für JD-Produktdetails. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verschiedene Möglichkeiten, den Hinweis in JavaScript zu ändernNächster Artikel：Verschiedene Möglichkeiten, den Hinweis in JavaScript zu ändern

In Verbindung stehende Artikel

Mehr sehen