<!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;
}
}
原文地址：https://www.cnblogs.com/cuilichao/p/9407283.html
时间： 2024-11-10 14:31:47