[JavaScript] 图片放大镜效果 (原生 JS)

先看效果吧, 在线地址: 图片放大镜

整体思路:

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 代码

(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";
            };
        })();

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";

来源: http://www.qdfuns.com/article/43245/8f1065d27f307a924f367cbcce0e092d.html