JavaScript는 돋보기 효과를 구현합니다(코드 예).

본 글의 내용은 자바스크립트로 돋보기 효과를 구현하는 내용입니다(코드 예시). 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.

구현 원리: 그림과 작은 그림을 각각 확대하려면 2개의 div를 사용하세요. 또한 작은 그림에 마스크 레이어를 배치해야 합니다. , 마스크 레이어의 움직임은 큰 그림의 움직임과 반대 방향이어야 합니다

Key: 큰 그림과 작은 그림의 크기 비율은 마스크 레이어와 작은 그림의 크기가 같아야 합니다. 확대된 표시 영역의 비율;

Difficulty: 해당 대형 이미지의 위치를 ​​표시하는 계산 마스크 레이어

더 이상 고민하지 말고 코드

code

html을 살펴보세요.

<div id="small">
    <div id="pic1">
        <img src="62-130501163925.jpg" alt="">
    </div>
    <div id="mask"></div>
</div>
<div id="big">
    <div id="pic2">
        <img src="62-130501163925.jpg" alt="">
    </div>
</div>

css

#small{
    width: 500px;
    height: 312px;
    position: absolute;
    left: 20px;
    top: 20px;
}
#pic1{
    position: absolute;
    left: 0px;
    top: 0px;
}
#pic1 img{
    width: 100%;
    height: 100%;
}
#big{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 50px;
    top: 50px;
    border: 1px solid blue;
    overflow: hidden;
}
#pic2{
    width: 1000px;
    height: 625px;
    position: absolute;
    left: 0;
    top: 0;
}
#pic2 img{
    width: 100%;
    height: 100%;
}
#mask{
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.3;/*让遮罩层看起来透明*/
    filter: alpha(opacity = 30);/*兼容不同的浏览器*/
    position: absolute;
    display: none;
}

js

window.onload = function(){//文档内容加载完之后再执行
    //当鼠标移入小图片，显示遮罩层和放大的区域
    $('small').onmouseenter = function(){
        $('mask').style.display = 'block';
        $('big').style.display='block';
    }
        //鼠标移出时，隐藏遮罩层和放大的区域
    $('small').onmouseleave = function(){
        $('mask').style.display='none';
        $('big').style.display="none";
    }
    //鼠标移动
    $('small').onmousemove = function(ev){
        var e = ev || window.event;
        //计算鼠标的位置，并让鼠标显示在遮罩层的中间
        var l = e.clientX - $('small').offsetLeft - 50;
        var t = e.clientY - $('small').offsetTop -50;
        //别让遮罩层移出图片
        if(l <= 0){
            l = 0;
        }
        if(l >= 500 - 100){
            l = 400;
        }
        if(t <= 0){
            t = 0;
        }
        if(t >= 312 - 100){
            t = 212;
        }
        //遮罩层的移动
        $(&#39;mask&#39;).style.left = l + &#39;px&#39;;
        $(&#39;mask&#39;).style.top = t + &#39;px&#39;;
        //通过遮罩层移动，来计算出放大后图片的显示区域
        $("pic2").style.left = -$("mask").offsetLeft * 2 + &#39;px&#39;;
        $("pic2").style.top = -$("mask").offsetTop * 2 + &#39;px&#39;;
    }
}
//为了更容容易的获取id
function $(id){
    return document.getElementById(id);
}

위 내용은 JavaScript는 돋보기 효과를 구현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!