找回密码
当前位置：前端开发者 > JavaScript > 正文

js图片放大镜效果

2018-07-10 分类：JavaScript 阅读(649) 评论(0)

notepad 前端开发环境|网站开发 前端 外包|web前端开发视频网站

整体思路：
1、当鼠标移入大盒子box时，显示隐藏的移动块move和大图片框bigimg（大图片框里面包含着大图片bbbimg）
2、获取当前的鼠标位置，并通过计算移动块与鼠标的位置比例，来得到大图片与大图片框框的比例，从而得到大图片的位置，实现放大
下面一步步来，有点耐心就OK了

一、首先是html结构
html 代码

<div id=”box”>
    <img src=”images/small.jpg” alt=””>
    <div id=”move”></div>
    <div id=”bigimg”>
        <img id=”bbbimg” src=”images/big.jpg” alt=””>
    </div>
</div>

很简单的结构，
一个box大盒子，罩着下面的三个小弟
小弟1：原图片
小弟2：移动的小灰块，叫它move，它来控制显示放大哪块（我做了一张半透明的图片作为它的背景）
小弟3：放大后的图片的活动范围（一个框框），叫它bigimg，这位小弟3也罩着一位小弟bbbimg，这位最小的小弟才是真正放大后的图片

二、css结构，也很简单，具体要注意的写在注释里面了
css 代码

#box {
        width: 310px;
        height: 310px;
        margin: 50px;
        position: relative;
        /* //方便其他的元素依靠它进行绝对定位 */
    }
    #move {
        background: url(images/move.png);
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        /* //先隐藏起来 */
    }
    #bigimg {
        width: 500px;
        height: 500px;
        position: absolute;
        top: 0;
        left: 350px;
        /* //定位在原图右边 */
        display: none;
        /* //先隐藏起来 */
        overflow: hidden;
        /* //超出的部分要隐藏起来 */
    }
    #bigimg img {
        width: 800px;
        /* //多大都没关系，反正会被隐藏起来的 */
        height: 800px;
        position: absolute;
        /* //这个定位是相对于bigimg这个盒子定位 */
        top: 0;
        left: 0;
    }

三、js交互事件
先上代码，看不懂代码再继续往下看
javascript 代码

<script>
    (function () {
        var box = document.getElementById(“box”);
        var move = document.getElementById(“move”);
        var bigimg = document.getElementById(“bigimg”);
        var bbbimg = document.getElementById(“bbbimg”);
        box.onmouseover = function () {
            // 鼠标移入时，显示选框和大图
            move.style.display = “block”;
            bigimg.style.display = “block”;
            move.style.cursor = “pointer”;
            bigimg.style.cursor = “pointer”;
        };
        box.onmouseout = function () {
            // 鼠标移出时，隐藏选框和大图
            move.style.display = “none”;
            bigimg.style.display = “none”;
        };
        // 获取位置
        box.onmousemove = function (e) {
            // 鼠标当前位置相对于视口的距离
            var x = e.clientX || e.pageX;
            var y = e.clientY || e.pageY;
            // box盒子相对于视口的位置
            var t = box.offsetTop;
            var l = box.offsetLeft;
            // 计算移动块move的位置(当前鼠标位置是move块的中心)
            var _left = x – l – move.offsetWidth / 2;
            var _top = y – t – move.offsetHeight / 2;
            if (_top <= 0) {
                _top = 0;
            } else if (_top >= box.offsetHeight – move.offsetHeight) {
                _top = box.offsetHeight – move.offsetHeight;
            }
            if (_left <= 0) {
                _left = 0;
            } else if (_left >= box.offsetWidth – move.offsetWidth) {
                _left = box.offsetWidth – move.offsetWidth;
            }
            move.style.top = _top + “px”;
            move.style.left = _left + “px”;
            //计算移动比例
            var w = _left / (box.offsetWidth – move.offsetWidth);
            var h = _top / (box.offsetHeight – move.offsetHeight);
            // 根据比例计算并设置大图在对应位置的位置
            var bleft = (bbbimg.offsetWidth – bigimg.offsetWidth) * w;
            var btop = (bbbimg.offsetHeight – bigimg.offsetHeight) * h;
            bbbimg.style.left = -bleft + “px”;
            bbbimg.style.top = -btop + “px”;
        };
    })();
</script>

1、首先获取各个元素，这里都看不懂的就不用往下看了
javascript 代码

    var box = document.getElementById(“box”);
    var move = document.getElementById(“move”);
    var bigimg = document.getElementById(“bigimg”);
    var bbbimg = document.getElementById(“bbbimg”);

2、鼠标移入移出时，显示与隐藏move块和大图片框
javascript 代码

box.onmouseover = function () {
        // 鼠标移入时，显示选框和大图
        move.style.display = “block”;
        bigimg.style.display = “block”;
        move.style.cursor = “pointer”;
        bigimg.style.cursor = “pointer”;
    };
    box.onmouseout = function () {
        // 鼠标移出时，隐藏选框和大图
        move.style.display = “none”;
        bigimg.style.display = “none”;
    };

3、重点来了，获取位置，先看一张图，你就会轻易知道e.clientX、offsetTop、offsetWidth的区别了

javascript 代码

// 鼠标当前位置相对于视口的距离
    var x = e.clientX || e.pageX;
    var y = e.clientY || e.pageY;
    // box盒子相对于视口的位置
    var t = box.offsetTop;
    var l = box.offsetLeft;

然后开始计算move移动块相对于盒子的距离，两个if条件算出的是它的最大和最小值

javascript 代码

当前鼠标位置是move块的中心)
    var _left = x – l – move.offsetWidth / 2;
    var _top = y – t – move.offsetHeight / 2;
    if (_top <= 0) {
        _top = 0;
    } else if (_top >= box.offsetHeight – move.offsetHeight) {
        _top = box.offsetHeight – move.offsetHeight;
    }
    if (_left <= 0) {
        _left = 0;
    } else if (_left >= box.offsetWidth – move.offsetWidth) {
        _left = box.offsetWidth – move.offsetWidth;
    }
    move.style.top = _top + “px”;
    move.style.left = _left + “px”;

接下来就开始算比例了，用move移动块移动的距离/（盒子的宽度-移动块的宽度）
javascript 代码

//计算移动比例
    var w = _left / (box.offsetWidth – move.offsetWidth);
    var h = _top / (box.offsetHeight – move.offsetHeight);

然后根据比例计算并设置大图在对应位置的位置，最后要加上-号，
javascript 代码

var bleft = (bbbimg.offsetWidth – bigimg.offsetWidth) * w;
    var btop = (bbbimg.offsetHeight – bigimg.offsetHeight) * h;
    bbbimg.style.left = -bleft + “px”;
    bbbimg.style.top = -btop + “px”;
电商网站前端开发项目描述|web前端开发制作网站素材|web前端开发网站
赞(0)
前端开发者 » js图片放大镜效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论