10.1—最简单的动画
***代码亲测可用***
动画:让元素位置随着时间而不断地发生变化
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>jiaxinjia</title>
<script src="script/01.js"></script>
</head>
<body >
<h1>what is your name?</h1>
<p id="zxc">WDFEVS!</p>
<img src="img/2.jpg" id="asd" width="50" height="50"/>
</body>
</html>
JS:
function positionq(){
var po = document.getElementById("zxc");
po.style.position="absolute";
po.style.left = "50px";
po.style.top = "100px";
moveElement("zxc", 500, 300, 20);
var po2 = document.getElementById("asd");
po2.style.position = "absolute";
po2.style.left = "50px";
po.style.top = "150px";
moveElement("asd", 500, 400, 30);
}
function moveElement(element, final_x, final_y, interval){
var po = document.getElementById(element);
var xpos = parseInt(po.style.left);
var ypos = parseInt(po.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++;
}
po.style.left = xpos +"px";
po.style.top = ypos +"px";
var repeat = "moveElement('"+element+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat, interval);
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(positionq);
***end***