孙肖宁

放大镜的制作
描述:当用户放在某张图片上的某一位置的时候,该区域在另外的地方进行放大。鼠标离开恢复原状,类似淘宝的查看商品的大图...
扫描右侧二维码阅读全文
18
2018/04

放大镜的制作

描述:当用户放在某张图片上的某一位置的时候,该区域在另外的地方进行放大。鼠标离开恢复原状,类似淘宝的查看商品的大图。
原理:准备两张等比例的图片,小的图片是用来正常显示,大的图片用一个小的盒子包起来,多余的地方进行隐藏。鼠标在小图片那个盒子里移动的时候,移动的距离与大盒子图片移动的距离成正比。
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 350px;
        height: 350px;
        margin:100px;
        border: 1px solid #ccc;
        position: relative;
    }
    .big {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 360px;
        border: 1px solid #ccc;
        overflow: hidden;
        display: none;
    }
    .mask {
        width: 175px;
        height: 175px;
        background: rgba(255, 255, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        display: none;
    }
    .small {
        position: relative;
    }
    img {
        vertical-align: top;
    }
</style>
<body>
    <div class="box">
        <div class="small">
            <img src="images/001.jpg" alt=""/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="images/0001.jpg" alt=""/>
        </div>
    </div>
</body>
</html>
<script>
    //获取相关元素
    var box = document.getElementsByClassName("box")[0];
    var small = box.firstElementChild || box.firstChild;
    var big = box.children[1];
    var mask = small.children[1];
    var bigImg = big.children[0];
    //控制大盒子和鼠标经过时候的阴影方框的显示和隐藏
    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 (event) {
        event = event || window.event;
        //获取鼠标在页面中的位置
        var pagex = event.pageX || scroll().left+event.clientX;
        var pagey = event.pageY || scroll().top +event.clientY;
        //方框可移动的位置
        var x = pagex - box.offsetLeft-mask.offsetWidth/2;
        var y = pagey - box.offsetTop - mask.offsetHeight/2;
        //防止越界
        if(x<0){
            x=0;
        }
        if(x>small.offsetWidth-mask.offsetWidth){
            x = small.offsetWidth-mask.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>small.offsetHeight-mask.offsetHeight){
            y=small.offsetHeight-mask.offsetHeight;
        }
        //方框的移动
        mask.style.left=x+"px";
        mask.style.top=y+"px";
        //得到比例
        var proportion = bigImg.offsetWidth/small.offsetWidth;
        //得到大图要移动的距离
        var xx = proportion*x;
        var yy = proportion*y;
        //大图进行移动
        bigImg.style.marginTop = -yy+"px";
        bigImg.style.marginLeft = -xx+"px";

    }

    /**
     * 封装的函数,用来获取被卷去的头部和左边部分
     * @returns {{top: number, left: number}}
     */
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
Last modification:April 18th, 2018 at 08:08 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment