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

JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)

2015-07-21 23:23 906 查看

moveElement函数

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用定时器实现JS动画效果</title>

<style>

</style>

</head>

<body>

<p id="message">where</p>
<p id="message2">whoa!</p>

<script>

function positionMessage(){

var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
moveElement("message",125,25,20);

var elem = document.getElementById("message2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
moveElement("message2",125,125,10);
//movement = setTimeout("moveMessage()", 5000);
}

function moveElement(elementID,final_x,final_y,interval){

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);
}
// function moveMessage(){
//     var elem = document.getElementById("message");
//     elem.style.left = "200px";
// }
positionMessage();
// moveMessage();

</script>
</body>
</html>

View Code

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

标签：

相关文章推荐

新的分享

章节导航