![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
* {margin: 0;padding: 0;}
#box {height: 200px;width: 200px;background: red;margin-top: 200px;margin-left: 200px;}
</style>
<title>原生javascript鼠標滾輪滾動放大縮小效果</title>
</head>
<body style="height:1000px;">
<div id="box" style="transform: scale(1);">放大縮小box</div>
</body>
<script>
let step = 0.01;
let INNER = false;
function $(select) {
return document.querySelector(select);
}
// 鼠標相對頁面的位置
function getMousePos(event) {
let e = event || window.event;
let scrollX =
document.documentElement.scrollLeft || document.body.scrollLeft;
let scrollY =
document.documentElement.scrollTop || document.body.scrollTop;
let x = e.pageX || e.clientX + scrollX;
let y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { x: x, y: y };
}
function getElementPosition(select) {
let dom = document.querySelector(select);
let scrollX =
document.documentElement.scrollLeft || document.body.scrollLeft;
let scrollY =
document.documentElement.scrollTop || document.body.scrollTop;
let rect = dom.getBoundingClientRect();
let x = scrollX + dom.getBoundingClientRect().left;
let y = scrollY + dom.getBoundingClientRect().top;
let height = dom.getBoundingClientRect().height;
let width = dom.getBoundingClientRect().width;
return { x: x, y: y, height: height, width: width };
}
function mouseIndom(event) {
let mouseMsg = getMousePos(event);
let domMsg = getElementPosition('#box');
let flagX = mouseMsg.x > domMsg.x && mouseMsg.x < domMsg.x + domMsg.width;
let flagY =
mouseMsg.y > domMsg.y && mouseMsg.y < domMsg.y + domMsg.height;
if (flagX && flagY) {
console.log('鼠標位於元素裏面啦！');
return true;
} else {
console.log('鼠標位於元素外面拉！');
return false;
}
}
// 文檔鼠標移動
document.onmousemove = function(event) {
INNER = mouseIndom(event);
console.log(INNER);
};
if (window.addEventListener)
//FF,火狐瀏覽器會識別該方法
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel; //W3C
//統一處理滾輪滾動事件
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
//IE、chrome瀏覽器使用的是wheelDelta，並且值爲“正負120”
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta; //因爲IE、chrome等向下滾動是負值，FF是正值，爲了處理一致性，在此取反處理
} else if (event.detail) {
//FF瀏覽器使用的是detail,其值爲“正負3”
delta = -event.detail / 3;
}
if (delta) handle(delta, event);
}
//上下滾動時的具體處理函數
function handle(delta, event) {
if (INNER) {
if (delta < 0) {
//向下滾動
console.log('向下滾動');
let scale =
Number.parseFloat($('#box').style.transform.replace('scale(', '')) +
step;
$('#box').style.webkitTransform = 'scale(' + scale + ')';
$('#box').innerText = '縮小了' + scale;
} else {
//向上滾動
console.log('向下滾動');
let scale =
Number.parseFloat($('#box').style.transform.replace('scale(', '')) -
step;
$('#box').style.webkitTransform = 'scale(' + scale + ')';
$('#box').innerText = '放大了' + scale;
}
event.preventDefault();
event.stopPropagation();
return;
}
}
</script>
</html>
