这是一个---放大镜，简单的放大~~~

最新推荐文章于 2022-10-06 17:05:39 发布

web_Rookie

最新推荐文章于 2022-10-06 17:05:39 发布

阅读量228

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/web_Rookie/article/details/107826118

版权

大家这应该对放大镜并不陌生，这次介绍的就是一种放大镜—就是一般购物时，当鼠标进入的时候会放大悬停的位置，一种效果
里面用的有 鼠标移入移出、body属性（client系列，offset系列）

**onmouseover** 鼠标移入事件
**onmouseout**鼠标移出事件

client：
元素.clientHeight 元素可视高 height+上下的padding
元素.clientWidth 元素可视宽 width+左右的padding
offset：
元素.offsetWidth width+padding+border
元素.offsetHeight height+padding+border

上代码  ↓ ↓ ↓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品查看</title>
    <style>
        #small {
            width: 130px;
            height: 130px;
            float: left;
            margin: 100px;
            position: relative;
        }

        #moveBox {
            width: 60px;
            height: 40px;
            background: rgba(255, 0, 0, 0.2);
            position: absolute;
            top: 0;
            cursor: all-scroll;
            display: none;
        }

        #big {
            width: 369px;
            height: 246px;
            border: 1px solid blue;
            overflow: hidden;
            position: relative;
            top: 100px;
            left: 500px;
            display: none;
        }

        #big img {
            position: absolute;
        }
    </style>

css样式--------------> ↓

<body>
    <div id="small">
        <img src="images/small.jpg" alt="">
        <div id="moveBox"></div>
    </div>
    <div id="big">
        <img src="images/big.jpg" alt="" id="img">
    </div>
</body>

两个图片，一大一小，进入小的，右侧大的会显示对应的位置，放大效果
左小右大
从这个可以看出移入左侧小图，出现一个小小的膜层/模板,右侧会显示左侧移入位置并放大（这里的放大其实就是对应的调整大图的位置出现在div框框中，框框是固定的，变化的是大图的位置，随小图的变化而变化）

下面上js代码，希望一些人有所帮助：

<script>
        window.onload = function () {
            //1.获取元素
            var smallDiv = document.getElementById("small");
            var moveDiv = document.getElementById("moveBox");
            var bigImg = document.getElementById("img");
            var bigDiv = document.getElementById("big");

            //2.移入，显示小方块和大图
            smallDiv.onmouseover = function () {
                moveDiv.style.display = "block";
                bigDiv.style.display = "block";
            }

            //3.离开的时候消失
            smallDiv.onmouseout = function () {
                moveDiv.style.display = "none";
                bigDiv.style.display = "none";
            }

            //4.移动   移动小方块   大图
            smallDiv.onmousemove = function (ev) {
                var ev = window.event || ev;
                var l = ev.clientX - smallDiv.offsetLeft - moveDiv.offsetWidth / 2;
                var t = ev.clientY - smallDiv.offsetTop - moveDiv.offsetHeight / 2;

                //限制范围                     
                if (l < 0) {
                    l = 0
                }
                if (l > smallDiv.clientWidth - moveDiv.offsetWidth) {
                    l = smallDiv.clientWidth - moveDiv.offsetWidth;
                }
                if (t < 0) {
                    t = 0;
                }
                if (t > smallDiv.clientHeight - moveDiv.offsetHeight) {
                    t = smallDiv.clientHeight - moveDiv.offsetHeight;
                }

                //设置div的位置
                moveDiv.style.left = l + "px";
                moveDiv.style.top = t + "px";

                //大图的移动   l/130  = ?/800      ? = 800*l/130
                bigImg.style.left = -bigImg.clientWidth * l / smallDiv.clientWidth + "px";
                bigImg.style.top = -bigImg.clientHeight * t / smallDiv.clientHeight + "px";

            }
        }
    </script>

//js 里注释有点少，别介意。。。。。-。-

进入小图出现模板，离开就消失，并且出现的位置也是看鼠标进入的位置

if判断，这里的判断肯定要有的，因为不能让左侧鼠标移出去，其他也跟着出去了。。
大图的移动是小图的倍数的，以比例进行的

还有个拖拽时间。。。差点忘了 onmousemove

发个完整的代码 ↓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品查看</title>
    <style>
        #small {
            width: 130px;
            height: 130px;
            float: left;
            margin: 100px;
            position: relative;
        }

        #moveBox {
            width: 60px;
            height: 40px;
            background: rgba(255, 0, 0, 0.2);
            position: absolute;
            top: 0;
            cursor: all-scroll;
            display: none;
        }

        #big {
            width: 369px;
            height: 246px;
            border: 1px solid blue;
            overflow: hidden;
            position: relative;
            top: 100px;
            left: 500px;
            display: none;
        }

        #big img {
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            //1.获取元素
            var smallDiv = document.getElementById("small");
            var moveDiv = document.getElementById("moveBox");
            var bigImg = document.getElementById("img");
            var bigDiv = document.getElementById("big");

            //2.移入，显示小方块和大图
            smallDiv.onmouseover = function () {
                moveDiv.style.display = "block";
                bigDiv.style.display = "block";
            }

            //3.离开的时候消失
            smallDiv.onmouseout = function () {
                moveDiv.style.display = "none";
                bigDiv.style.display = "none";
            }

            //4.移动   移动小方块   大图
            smallDiv.onmousemove = function (ev) {
                var ev = window.event || ev;
                var l = ev.clientX - smallDiv.offsetLeft - moveDiv.offsetWidth / 2;
                var t = ev.clientY - smallDiv.offsetTop - moveDiv.offsetHeight / 2;

                //限制范围                     
                if (l < 0) {
                    l = 0
                }
                if (l > smallDiv.clientWidth - moveDiv.offsetWidth) {
                    l = smallDiv.clientWidth - moveDiv.offsetWidth;
                }
                if (t < 0) {
                    t = 0;
                }
                if (t > smallDiv.clientHeight - moveDiv.offsetHeight) {
                    t = smallDiv.clientHeight - moveDiv.offsetHeight;
                }

                //设置div的位置
                moveDiv.style.left = l + "px";
                moveDiv.style.top = t + "px";

                //大图的移动   l/130  = ?/800      ? = 800*l/130
                bigImg.style.left = -bigImg.clientWidth * l / smallDiv.clientWidth + "px";
                bigImg.style.top = -bigImg.clientHeight * t / smallDiv.clientHeight + "px";

            }
        }
    </script>
</head>

<body>
    <div id="small">
        <img src="images/small.jpg" alt="">
        <div id="moveBox"></div>
    </div>
    <div id="big">
        <img src="images/big.jpg" alt="" id="img">
    </div>
</body>

</html>

ok 这里就没得了，希望对一些人有些帮助，谢谢观看 ·,· 哈哈哈哈

web_Rookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
这是一个---放大镜，简单的放大~~~

大家这应该对放大镜并不陌生，这次介绍的就是一种放大镜—就是一般购物时，当鼠标进入的时候会放大悬停的位置，一种效果里面用的有鼠标移入移出、body属性（client系列，offset系列）**onmouseover** 鼠标移入事件**onmouseout**鼠标移出事件client：元素.clientHeight 元素可视高 height+上下的padding元素.clientWidth 元素可视宽 width+左右的paddingoffset：元素.offsetWidth
复制链接

扫一扫