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

最新推荐文章于 2024-07-20 03:04:31 发布

cyndi_超努力

最新推荐文章于 2024-07-20 03:04:31 发布

阅读量1.8k

点赞数 2

分类专栏：工作积累文章标签： css3 javascript css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_66722601/article/details/128702220

版权

工作积累专栏收录该内容

39 篇文章 1 订阅

订阅专栏

该文章介绍了一个使用HTML和JavaScript实现的功能，通过CSS3的transform属性和滚轮事件，使用户能在红色边框区域内通过鼠标滚轮控制绿色边框盒子里的元素缩放。当滚轮向上滚动时，元素缩小；向下滚动时，元素放大。点击‘还原’按钮，元素恢复到初始大小。代码示例展示了具体的实现方式。

摘要由CSDN通过智能技术生成

一、需求

鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。

鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。

点击还原按钮:绿色盒子里所有元素还原为初始值。

二、相关知识点

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、放大