js 쇼핑 몰 확대경 기능 실현

본 논문 의 사례 는 js 가 쇼핑 몰 확대경 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
우선 효과 그림 보기:

먼저 레이아웃,왼쪽 작은 액자,마우스 이동 상자,오른쪽 확대 상 자 를 포함 합 니 다.

<div class="box">
        <div class="small">
            <img src="small3.jpg" alt="">
            <div class="move"></div>
        </div>
        <div class="big">
            <img src="big3.jpg" alt="">
        </div>
</div>

css 써 주세요.

.small{
    position: relative;
    float: left;
    width: 450px;
    height: 450px;
    border:1px solid #000;
}
.small .move{
    position: absolute;
    top:0;
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,0,0.4);
    cursor:move;
    display: none;
}
.big{
    position: relative;
    float: left;
    width: 540px;
    height: 540px;
    margin-left: 20px;
    overflow: hidden;
    border:1px solid #000;
    display: none;
}
.big img{
    position: absolute;
    top:0;
    left: 0;
}

js 부분:

var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
    //             
    small.onmouseover=function(){
        move.style.display='block';
        big.style.display="block";
    };
    small.onmouseout=function(){
        move.style.display='none';
        big.style.display="none";
    };
    small.onmousemove=function(e){
        e=e||window.event;//     
        var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
        var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>smallImg.offsetWidth-move.offsetWidth){
            x=smallImg.offsetWidth-move.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>smallImg.offsetHeight-move.offsetHeight){
            y=smallImg.offsetHeight-move.offsetHeight;
        }
        move.style.left=x+"px";
        move.style.top=y+"px";
        //    move          
        var scale=bigImg.offsetWidth/smallImg.offsetWidth;
        //      
        bigImg.style.left='-'+x*scale+'px';
        //                   
        bigImg.style.top='-'+y*scale+'px';
    }

확대경 효과 가 이 루어 집 니 다!

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.