JS实现简单移动动画函数

<!--- html代码 -->

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="message">Whee!</p>
<script src="js/move.js"></script>
</body>

</html>

<!-- JS代码 -->

function positionMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var ele=document.getElementById("message");
ele.style.position="absolute";
ele.style.left="50px";
ele.style.top="100px";
moveElement("message",125,25,20);
}
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var ele=document.getElementById(elementID);
var xpos=parseInt(ele.style.left);
var ypos=parseInt(ele.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--;
}
ele.style.left=xpos+ "px";
ele.style.top=ypos+ "px"
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement=setTimeout(repeat,interval);
}
function addLoadEvent(func){
var oldload=window.Load;
if(typeof window.onload!='function'){
window.οnlοad=func;
}else{
window.οnlοad=function(){
oldonload();
func();


}
}
addLoadEvent(positionMessage);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值