原生javascript實現滑鼠在視窗按下拖動,元素放大效果。
阿新 • • 發佈:2019-02-09
程式碼如下:
<!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">
<title>滑鼠按下拖動,元素放大效果</title>
<style >
*{margin:0;padding:0;user-select:none;height:100%;overflow:hidden;}
#od{height:400px;width:400px;margin:100px auto;background:red;transition:all .4s ease-out;}
</style>
</head>
<body>
<div class="ob" id="od">
1
</div>
<script>
function $(selector){
return document.querySelector(selector);
}
var body = $("body");
var flag = false;
var mouseX,mouseY;
var bodyWidth,bodyHeight;
//視窗寬度
if (window.innerWidth){
bodyWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
bodyWidth = document.body.clientWidth;
}
//視窗高度
if (window.innerHeight){
bodyHeight = window.innerHeight;
}else if((document.body) && (document.body.clientHeight)){
bodyHeight = document.body.clientHeight;
}
//注意必須監聽文件事件,不能監聽body,因為如果監聽body的話當滑鼠按下離開視窗,(比如移動到底部工作列時會出現bug)
//滑鼠按下後的效果
document.onmousedown = function(e){
flag = true;
e = e || window.event;
mouseX = e.pageX;
mouseY = e.pageY;
console.log(mouseX);
};
//滑鼠鬆開後的效果
document.onmouseup = function(e){
flag = false;
body.style.webkitTransform = "scale(1)";
mouseX = e.pageX;
mouseX = e.pageY;
console.log(1111111);
};
//滑鼠移動的效果
document.onmousemove = function(e){
console.log("a");
e = e || window.event;
var a_mouseX = e.pageX;
var a_mouseY = e.pageY;
var scaleNumx = (a_mouseX - mouseX)/bodyWidth + 1; //X放大倍數
var scaleNumy = (a_mouseY - mouseY)/bodyHeight + 1; //Y放大倍數
console.log(scaleNumx+"--"+scaleNumy)
//如果滑鼠按下了
if(flag){
body.style.webkitTransform = "scale(" + scaleNumx + "," + scaleNumy + ")";
}else{
return false;
}
}
</script>
</body>
</html>
注意必須監聽文件事件,不能監聽body,因為如果監聽body的話當滑鼠按下離開視窗,(比如移動到底部工作列時會出現bug)詳情可以看下為什麼會這樣。
https://segmentfault.com/q/1010000004973341