js原生放大镜详细案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .smallBox{
            top: 100px;
            left: 50px;
            position: absolute;
            width: 350px;
            height: 350px;
            border: 1px solid #000;

        }
        .mask{
            width: 175px;
            height: 175px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            background-color: rgba(221,165,32,0.4);

        }
        .bigBox{
            position: absolute;
            top: 100px;
            left: 410px;
            border: 1px solid #000;
            width: 400px;
            height: 400px;
            overflow: hidden;
            display: none;
        }
        .bigBox img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="smallBox" id="smallBox">
        <img src="http://cdn.attach.qdfuns.com/notes/pics/201705/13/234224kkzdkzppud4i2pkp.jpg" alt=""/>
        <div class="mask" id="mask"></div>
    </div>
    <div class="bigBox" id="bigBox">
        <img src="http://cdn.attach.qdfuns.com/notes/pics/201705/13/234232r8g5hq0h8y8g8gbb.jpg" alt="" id="bigImg"/>
    </div>
</div>
</body>
<!--common.js 我已经封装好了兼容获取鼠标在页面的位置的函数-->
<script>
    var smallBox=document.getElementById('smallBox');
    var mask=document.getElementById('mask');
    var bigBox=document.getElementById('bigBox');
    var bigImg=document.getElementById('bigImg');

//    第一步:鼠标移上小盒子让遮罩层显示
    smallBox.onmousemove=function(e){
        e=e||window.event;
//        让遮罩层和大盒子显示
        mask.style.display='block';
        bigBox.style.display='block';

//        获取鼠标的在小盒子中的位置
        var maskX=page(e).pageX-smallBox.offsetLeft;
        var maskY=page(e).pageY-smallBox.offsetTop;

//        让鼠标在遮罩层的中间位置
        var x=maskX-mask.offsetWidth/2;
        var y=maskY-mask.offsetHeight/2;

//不能让遮罩层移除小盒子的范围

        x=x<0?0:x;
        y=y<0?0:y;

        x=x>smallBox.offsetWidth-mask.offsetWidth?smallBox.offsetWidth-mask.offsetWidth:x;
        y=y>smallBox.offsetHeight-mask.offsetHeight?smallBox.offsetHeight-mask.offsetHeight:y;

        mask.style.left=x+'px';
        mask.style.top=y+'px';

//        最后让大图片的位置随着遮罩层的位置发生变化,移动的方向为反方向
//        算法:(大盒子/遮罩层)=(大图片/小图片),按照这个比例算就行了
        bigImg.style.left=-bigBox.offsetWidth/mask.offsetWidth*x+'px';
        bigImg.style.top=-bigBox.offsetHeight/mask.offsetHeight*y+'px';

    }

    smallBox.onmouseout=function(){
        mask.style.display='none';
        bigBox.style.display='none';
    }

    /*----封装页面的坐标函数---*/
    function page(e) {
        return {
            pageY: e.pageY || e.clientY + document.documentElement.scrollTop,
            pageX: e.pageX || e.clientX + document.documentElement.scrollLeft
        }
    }
</script>
</html>

欢迎分享本文,转载请保留出处:前端ABC » js原生放大镜详细案例

赞 (1)
分享到:更多 ()

发表评论 0