js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

最新推荐文章于 2024-05-31 11:22:16 发布

程序媛zcx

最新推荐文章于 2024-05-31 11:22:16 发布

阅读量9.3k

点赞数 5

分类专栏： css3 JavaScript HTML 文章标签： scale 放大缩小鼠标滚轮

本文链接：https://blog.csdn.net/qq_40015157/article/details/111216733

版权

JavaScript 同时被 3 个专栏收录

72 篇文章 9 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

一、需求

鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。
鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。
点击还原按钮:绿色盒子里所有元素还原为初始值。

二、相关知识点

1、CSS3 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
scale(x[,y]?) 定义 2D 缩放转换。

2、CSS3 transform-Origin属性允许您更改转换元素的位置。
transform-origin: x-axis y-axis z-axis;
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

三、示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            border: 3px solid red;
            overflow: auto;
            margin-top: 20px;
        }

        .inner-box {
            width: 200px;
            height: 200px;
            background: pink;
            border: 2px solid green;
            margin-left: 100px;
            margin-top: 100px;
        }

        .sm-box {
            width: 100px;
            height: 100px;
            background: #b1dfbb;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<button id="restoryBtn" onclick="centerScale();">还原</button>
<div class="box" id="box">
    <div id="div1" class="inner-box">
        <div class="sm-box"></div>
        <p>缩放区域,在红色盒子外鼠标滚动无效</p>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var box = document.getElementById('box');
    var scal = 1;

    function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
        var ev = ev || window.event;
        var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
        down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        if (down) {
            console.log('鼠标滚轮向下放大---------')
            scal = (parseFloat(scal) + 0.01).toFixed(2);
            console.log("放大系数: " + scal)
            oDiv.style.transform = "scale(" + scal + ")";    //scale()在这里要使用拼接的方式才能生效
            oDiv.style.transformOrigin = '0 0';
        } else {
            console.log('鼠标滚轮向上缩小++++++++++')
            if (scal == 0.01) {
                scal = 0.01
                return
            } else {
                scal = (parseFloat(scal) - 0.01).toFixed(2);
            }
            console.log("缩小系数: " + scal)
            oDiv.style.transform = "scale(" + scal + ")";    //scale()在这里要使用拼接的方式才能生效。
            oDiv.style.transformOrigin = '0 0';
        }
        if (ev.preventDefault) {/*FF 和 Chrome*/
            ev.preventDefault();// 阻止默认事件
        }
        return false;
    }

    addEvent(box, 'mousewheel', onMouseWheel);
    addEvent(box, 'DOMMouseScroll', onMouseWheel);


    function addEvent(obj, xEvent, fn) {
        if (obj.attachEvent) {
            obj.attachEvent('on' + xEvent, fn);
        } else {
            obj.addEventListener(xEvent, fn, false);
        }
    }

    function centerScale() {
        console.log("还原------")
        scal = 1;
        oDiv.style.transform = "scale(" + scal + ")";
        oDiv.style.transformOrigin = '0 0';
        // $("#drag").css({"transform": "scale(" + scal + ")","transformOrigin": "0 0"});//jquery写法
    }
</script>

1、放大：

2、还原：

3、缩小：

程序媛zcx

关注

5
点赞
踩
33

收藏

觉得还不错? 一键收藏
1
评论
js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

一、需求鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。点击还原按钮:绿色盒子里所有元素还原为初始值。二、相关知识点1、CSS3 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。scale(x[,y]?) 定义 2D 缩放转换。2、CSS3 transform-Origin属性允许您更改转换元素的位置。transform-origin:x-axis y-a..
复制链接

扫一扫