집 > 기사 > 웹 프론트엔드 > JD 상품 상세정보에 돋보기 효과를 주는 방법

JD 상품 상세정보에 돋보기 효과를 주는 방법

php中世界最好的语言원래의: 2018-03-14 14:48:022524검색

Jingdong돋보기 효과

돋보기의 주요 지식 포인트를 구현

자바스크립트에서 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!