JavaScript封裝動畫函數
阿新 • • 發佈：2018-08-02
tar 清理 content ntc .text def 產生 ted tex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { margin-top: 10px; width: 100px; height: 50px;background-color: purple; position: absolute; } </style> </head> <body> <input type="button" value="移動到400px" id="bt1"/> <input type="button" value="移動到800px" id="bt2"/> <div id="dv"></div> <script src="common.js"></script> <script> my$("bt1").onclick = function () { animate(my$("dv"), 400); }; my$("bt2").onclick = function () { animate(my$("dv"), 800); }; //動畫函數 function animate(element, target) { //一會要清理定時器(只產生一個定時器) var timeId = setInterval(function () {//獲取div當前的位置 var current = element.offsetLeft;//數字類型沒有px //div每次移動多少像素-----步數 var step = 10; step = current < target ? step : -step; //每次移動後的距離 current += step; //判斷當前移動後的位置是否到達目標位置 if (Math.abs(target - current) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定時器 clearInterval(timeId); element.style.left = target + "px"; } }, 20) } </script> </body> </html>
common.js:
/** * Created by Administrator on 2018/7/22. */ function my$(id) { return document.getElementById(id); } //設置任意的標簽中間的文本內容 function setInnerText(element, text) { //判斷瀏覽器是否支持該屬性 if (typeof element.textContent == "undefined") { element.innerText = text; } else { element.textContent = text; } } //獲取任意標簽中間的文本內容 function getInnerText(element) { if (typeof element.textContent == "undefined") { return element.innerText; } else { return element.textContent; } } //獲取任意一個父級元素的第一個子級元素 function getFirstElementChild(element) { if (element.firstElementChild) {//true 支持 return element.firstElementChild; } else { var node = element.firstChild;//第一個子節點 while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } } //獲取任意一個父級元素的最後一個子級元素 function getLastElementChild(element) { if (element.lastElementChild) { return element.lastElementChild; } else { var node = element.lastChild; while (node && node.nodeType != 1) { node = node.previousSibling; } return node; } } //為任意元素綁定任意事件 //參數1:任意元素 //參數2:事件類型 //參數3:事件處理函數 function addEventListner (element, type, fn) { //判斷瀏覽器是否支持該方法 if(element.addEventListener) { element.addEventListener(type,fn, false); }else if(element.attachEvent) { element.attachEvent("on" + type, fn); }else { element["on"+type] = fn; } }
JavaScript封裝動畫函數