您的位置：首页 > Web前端 > JavaScript

web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果

2016-11-26 17:05 1051 查看

web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果

1. 动画基础知识

1.位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function positionMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px";
}
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}

function moveMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.left="200px";
}

addLoadEvent(positionMessage);
addLoadEvent(moveMessage);
</script>
</head>
<body>
<p id="message">Where!</p>
</body>
</html>

改变moveMessage里面相应的参数就能进行相应的改变。

2.时间

JavaScript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行相应的函数。这个函数带有两个参数：第一个参数往往是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给的函数：setTimeout(“function”,interval)

在绝大部分，把这个函数调用赋值给一个变量将是一个好主意：

variable=setTimeout(“function”,interval)；

可以使用clearTimeout(variable)来取消某个正在排队等待执行的函数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function positionMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px";
movement=setTimeout("moveMessage()",1000);
}
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}

function moveMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.left="200px";
}

addLoadEvent(positionMessage);

</script>
</head>
<body>
<p id="message">Where!</p>
</body>
</html>

这样经过1s之后就会动态地改变了。当然在这段等待的时间内使用clearTimeout(movement);就可以取消当前动画操作

3.时间递增量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function positionMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px";
movement=setTimeout("moveMessage()",1000);
}
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}

function moveMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos == 200 && ypos == 100){
return true;
}
if(xpos < 200){
xpos++;
}
if(xpos > 200){
xpos--;
}
if(ypos < 100){
ypos++;
}
if(ypos > 100){
ypos--;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
movement=setTimeout("moveMessage()",10);
}

addLoadEvent(positionMessage);

</script>
</head>
<body>
<p id="message">Where!</p>
</body>
</html>

4.抽象

把这些常数改变为变量，这个函数的灵活性和适用性也会大大地提高。通过对moveMessage函数进行抽象，可以使他变得更为通用。

4.1 创建moveElement函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function positionMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px";
moveElement("message",200,100,20);
}
addLoadEvent(positionMessage);
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}

function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem=document.getElementById(elementID);
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos ==final_x && ypos==final_y){
return true;
}
if(xpos < final_x){
xpos++;
}
if(xpos > final_x){
xpos--;
}
if(ypos < final_y){
ypos++;
}
if(ypos > final_y){
ypos--;
}

elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"

movement=setTimeout(repeat,interval);

}

</script>
</head>
<body>
<p id="message">Where!</p>
</body>
</html>

通过修改“moveElement(“message”,200,100,20);”里面相应的值，可以做出各种不同的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript web前端

相关文章推荐

新的分享

章节导航