JD 상품 상세정보에 돋보기 효과를 주는 방법-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-03-14 14:48:02

원래의

2461명이 탐색했습니다.

Jingdong돋보기 효과

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

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

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