原生js实现放大镜效果

最新推荐文章于 2023-09-14 19:35:46 发布

折纸成鸢。

最新推荐文章于 2023-09-14 19:35:46 发布

阅读量146

点赞数

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/qq_26679989/article/details/105443974

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

javascript

28 篇文章 1 订阅

订阅专栏

原生js实现放大镜效果

一、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        position: relative;
        width: 800px;
        height: 500px;
        margin: 20px auto;
		background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504071640389&di=6968809a30df0abb70c0b332cb14d98c&imgtype=0&src=http%3A%2F%2Fpic5.nipic.com%2F20091227%2F9546_020007794985_2.jpg");
        background-size: 800px 500px;
        background-repeat: no-repeat;
    }

    .fd {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-size: 1600px 1000px;
		background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504071640389&di=6968809a30df0abb70c0b332cb14d98c&imgtype=0&src=http%3A%2F%2Fpic5.nipic.com%2F20091227%2F9546_020007794985_2.jpg");
        display: none;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="fd"></div>
    </div>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function(ev) {
        getEles('box')[0].addEventListener('mouseenter', function(ev) {
            getEles('fd')[0].style.display = 'block';
        }, false);

        getEles('box')[0].addEventListener('mousemove', function Timer(ev) {
            //获取放大镜在盒子的位置            
            var left = ev.clientX - this.offsetLeft;
            var top = ev.clientY - this.offsetTop;

            //设置放大镜与鼠标的位置
            cssStyle(getEles('fd')[0], "left", (left - 100));
            cssStyle(getEles('fd')[0], "top", (top - 100));
            //设置放大镜图片位置
            cssStyle(getEles('fd')[0], "backgroundPositionX", (-2 * left + 100));
            cssStyle(getEles('fd')[0], "backgroundPositionY", (-2 * top + 100));

            //判断越界
            if (left < 0 || top < 0 || top > getEles('box')[0].offsetHeight || left > getEles('box')[0].offsetWidth) {
                getEles('fd')[0].style.display = 'none';
            }
        }, false);
        //封装样式
        function cssStyle(dom, attr, value) {
            if (arguments.length <= 2) {
                return console.log('请确认输入值是否正确');
            } else {
                return dom.style[attr] = value + 'px';
            }
        }
        //封装以class类命名的dom函数
        function getEles(className) {
            return document.getElementsByClassName(className);
        };
    }, false);
    </script>
</body>

</html>

二、效果图

在这里插入图片描述

折纸成鸢。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现放大镜效果

原生js实现放大镜效果一、案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> * { margin:...
复制链接

扫一扫

专栏目录