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

用js实现动画效果

2017-09-05 21:56 211 查看

例子：

1）Animation.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>example of animation</title>
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/moveElement.js"></script>
<script type="text/javascript" src="scripts/positionMessage.js"></script>
</head>
<body>
<p id="message">Whee!!!</p>
</body>
</html>2)addLoadEvent.js
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
3)positionMessage.js

function positionMessage(){
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px";
moveElement("message",200,100,10);
}

addLoadEvent(positionMessage);
4)moveElement.js

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

addLoadEvent(moveElement);思路是：
首先用positionMessage给定一个位置，然后去调用moveElement，检测是否达到目标位置，对不同的情况，横纵坐标加或者减，每隔interval毫秒就去重新调用moveElement（通过setTimeout函数）

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

标签：

相关文章推荐

新的分享

章节导航