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

这篇具有很好参考价值的文章主要介绍了js实现鼠标滚轮放大缩小页面指定区域(css3 scale)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、需求

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

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

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

二、相关知识点

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