JD製品の詳細に虫眼鏡効果を作成する方法-jsチュートリアル-php.cn

JD製品の詳細に虫眼鏡効果を作成する方法

php中世界最好的语言

リリース： 2018-03-14 14:48:02

オリジナル

2516 人が閲覧しました

Jingdong虫眼鏡効果

JD製品の詳細に虫眼鏡効果を作成する方法

JavaScriptでのDOM操作

の主な知識ポイントを理解します。
JavaScriptにおける時間の取得には、主に写真上でマウスが移動した際のmouseenter、mouseleave、onmousemoveイベントと、イベントオブジェクトの属性clientY、clientX、要素幅のoffsetWidth、offsetHightの取得が含まれます。、など。
絶対的な位置決めと倍率の計算を考慮するのが最善です。そこで使用される倍率式（小枠内の倍率領域の面積/小枠の面積）= (大きなフレームの領域/大きなバスケット内の領域) 写真の領域) //大きな写真の原則は、大きなフレームに配置し、大きなフレームの CSS スタイルを設定することですオーバーフローするフレーム: 小さなバスケット内の領域を大きなフレームに比例して表示できるように、非表示にします。

具体的なコードの実装は次のとおりです

<!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="JD製品の詳細に虫眼鏡効果を作成する方法" >//记得将其设置与小框大小一致            <p id="magnifying"></p>
        </p>
        <p id="big">
            <img  src="img/2.jpg" id="bigImg" / alt="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>

ログイン後にコピー

この方法で拡大効果を実現できます。これが皆さんのお役に立てば幸いです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS 設計パターンのコンストラクターパターンの詳細な説明

フロントエンドでモジュール性を使用する必要があるのはなぜですか?

ブラウザの互換性問題に対する Web フロントエンドソリューション

以上がJD製品の詳細に虫眼鏡効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。