一、需求
鼠標(biāo)滾輪在紅色邊框區(qū)域內(nèi)向上滾動(dòng):綠色邊框盒子里所有元素縮小。
鼠標(biāo)滾輪在紅色邊框區(qū)域內(nèi)向下滾動(dòng):綠色邊框盒子里所有元素放大。
點(diǎn)擊還原按鈕:綠色盒子里所有元素還原為初始值。
二、相關(guān)知識(shí)點(diǎn)
1、CSS3 Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
scale(x[,y]?) 定義 2D 縮放轉(zhuǎn)換。
2、CSS3 transform-Origin屬性允許您更改轉(zhuǎn)換元素的位置。
transform-origin: x-axis y-axis z-axis;
2D轉(zhuǎn)換元素可以改變?cè)氐腦和Y軸。 3D轉(zhuǎn)換元素，還可以更改元素的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>縮放區(qū)域,在紅色盒子外鼠標(biāo)滾動(dòng)無(wú)效</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) {/*當(dāng)鼠標(biāo)滾輪事件發(fā)生時(shí)，執(zhí)行一些操作*/
var ev = ev || window.event;
var down = true; // 定義一個(gè)標(biāo)志，當(dāng)滾輪向下滾時(shí)，執(zhí)行一些操作
down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
if (down) {
console.log('鼠標(biāo)滾輪向下放大---------')
scal = (parseFloat(scal) + 0.01).toFixed(2);
console.log("放大系數(shù): " + scal)
oDiv.style.transform = "scale(" + scal + ")"; //scale()在這里要使用拼接的方式才能生效
oDiv.style.transformOrigin = '0 0';
} else {
console.log('鼠標(biāo)滾輪向上縮小++++++++++')
if (scal == 0.01) {
scal = 0.01
return
} else {
scal = (parseFloat(scal) - 0.01).toFixed(2);
}
console.log("縮小系數(shù): " + scal)
oDiv.style.transform = "scale(" + scal + ")"; //scale()在這里要使用拼接的方式才能生效。
oDiv.style.transformOrigin = '0 0';
}
if (ev.preventDefault) {/*FF 和 Chrome*/
ev.preventDefault();// 阻止默認(rèn)事件
}
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.還原文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-506401.html
3.縮小文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-506401.html
到了這里，關(guān)于js實(shí)現(xiàn)鼠標(biāo)滾輪放大縮小頁(yè)面指定區(qū)域(css3 scale)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
