移動軌跡回放
阿新 • • 發佈：2018-12-20
這兩天的作業壓死個人，就沒空寫東西了，先貼一個剛新鮮出爐還熱乎的程式碼~
主要功能是：在頁面中按下並移動滑鼠，釋放時，小人會按照滑鼠移動軌跡運動
核心主要是按下滑鼠事件 onmousedown , 滑鼠滑動事件 onmousemove , 滑鼠鬆開後 onmouseup;
除此之外很重要的一點是需要記錄滑鼠的座標，以便小飛人可以按照記錄的軌跡回放
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ position: absolute; } </style> </head> <body> <input type="button" value="根據移動軌跡移動" /> <p>點選按鈕啟用功能</p> <img src="img/1.gif"/> <script type="text/javascript"> var aInput = document.getElementsByTagName("input")[0]; var oP = document.getElementsByTagName("p")[0]; var oImg = document.getElementsByTagName("img")[0]; aInput.onmousedown = function(e){ oP.innerHTML = "功能已啟用"; var evt = e || event; evt.stopPropagation(); //阻止事件冒泡到父元素,阻止任何父事件處理程式被執行 document.onmousedown = function(e){ var arr = []; var evt = e || event; var x = evt.clientX; var y = evt.clientY; arr.push({posX:x,posY:y}); document.onmousemove = function(e){ var evt = e || event; arr.push({posX:evt.clientX,posY:evt.clientY}); //console.log(arr); return false; } document.onmouseup = function(){ var time = setInterval(function(){ oImg.style.left = arr[0].posX + "px"; oImg.style.top = arr[0].posY + "px"; arr.shift(); if(arr.length == 0){ clearInterval(time); } },50) document.onmouseup = null; document.onmousemove = null; } } } </script> </body> </html>
貼出來的程式碼顏色都沒有變化的，（emmm這個小東西我可以沒事劃拉幾下看小飛人啊哈哈~）