<!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; } }