前言
你相信時光倒流嗎，
震驚！！！
代碼界一小伙利用javaScript
把一個div的生長周期倒退重演
實作效果
涉及知識點
1.瀏覽器的滾動事件(onscroll)
2.滑鼠的按下事件（mousedown）
3.滑鼠的抬起事件（mouseup）
4.滑鼠的移動事件（mousemove）
5.游標坐標點的獲取、獲取事件物件
6.邊緣檢測
7.定時器(setInterval)
8.陣列的方法（push）
完整代碼
復制可用（內有注釋說明）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 200px;
background: #000;
position: absolute;
left: 600px;
top: 300px;
}
#tuo{
width: 300px;
height: 50px;
background: #ccc;
}
h1 a{
font-size: 10px;
color: cornflowerblue;
display: block;
float: right;
}
</style>
</head>
<body>
<div id="box">
<h1 id="tuo"><a href="javascript:;" id="d">點擊還原軌跡</a></h1>
</div>
</body>
<script>
//封裝一個id獲取函式
function $id(id){
return document.getElementById(id)
}
//封裝一個獲取滾動的距離{top:"",left:""}
function getScroll(){
if(window.pageYOffset){
return {
top:window.pageYOffset,
left:window.pageXOffset
}
}else if(document.documentElement.scrollLeft){
return {
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}else{
return {
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
}
var box =$id("box");//獲取拖拽體所容器
var tuo =$id("tuo");//獲取拖拽觸發容器
var d =$id("d");//獲取a標簽
var arr = [];//創建一個空陣列，用來存盤box的移動軌跡
// 1 給拖拽物件tuo創建滑鼠按下事件
tuo.onmousedown = function(e){
e = e || window.event;//獲取滑鼠按下物件
//兼容寫法，獲取滑鼠相對box的位置
var disx = e.offsetX || e.layerX;
var disy = e.offsetY || e.layerY;
//事件委托，把box的移動事件委托給body
document.body.onmousemove = function(e){
//兼容寫法，滑鼠可視區域+滾動條的距離
var oLeft = (e.clientX + getScroll().left) - disx;
var oTop= (e.clientY + getScroll().top) - disy;
//邊緣檢測
if(oLeft<0){
oLeft = 0;
}
if(oLeft>window.innerWidth - box.offsetWidth){
oLeft = window.innerWidth - box.offsetWidth;
}
if(oTop<0){
oTop = 0;
}
if(oTop>window.innerHeight - box.offsetHeight){
oTop = window.innerHeight - box.offsetHeight;
}
//把最終的值賦給box
box.style.left = oLeft + "px";
box.style.top = oTop + "px";
//每移動一次，就往空陣列添加資料
arr.push({"left":box.style.left , "top":box.style.top})
}
//事件委托，當檢測到滑鼠抬起時，讓移動事件失效
document.body.onmouseup = function(){
document.body.onmousemove = null;
}
}
//定義一個全域定時器
var timer;
//創建點擊a標簽事件
d.onclick = function(){
var i = arr.length - 1;//i為陣列長度
clearInterval(timer)//使用定時器時先清空定時器(重點)
timer = setInterval(function(){
//還原軌跡
box.style.left = arr[i].left;
box.style.top = arr[i].top;
i--;//陣列長度--
//當i<0時停止定時器，并讓陣列清空
if(i<0){
clearInterval(timer)
arr = [];
}
},1000/30)//每1000/30毫秒還原一次
}
</script>
</html>
下期再見
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/89273.html
標籤：其他
上一篇：JSP課程學習（第一周）