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

最新推荐文章于 2024-08-14 15:52:52 发布

程序媛zcx

最新推荐文章于 2024-08-14 15:52:52 发布

阅读量9.5k

点赞数 5

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

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

版权

一、需求

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

二、相关知识点

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;