一、需求
鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。
鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。
点击还原按钮:绿色盒子里所有元素还原为初始值。
二、相关知识点
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、放大
![](https://i-blog.csdnimg.cn/blog_migrate/ea3270d83563fd68ffd5a9492756151e.png)
2.还原
![](https://i-blog.csdnimg.cn/blog_migrate/e6ad6845c213d2b2fc826fe066495696.png)
3.缩小
![](https://i-blog.csdnimg.cn/blog_migrate/e7332575dfaf7d751eb116d424841c91.png)