Javascript学习第二季（实战6） 
点击下载此文件
实战1 ，javascript图片馆已经讲完了。今天我们来讲 用javascript做动画效果。
非常的cool哦。
Demo1：
<!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=gbk" />
<title>Animation</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()",3000);//3秒后 调用moveMessage 。
//注： 也可以写成： movement = setTimeout( moveMessage ,3000);
}
function moveMessage() {
// 判断浏览器是否支持这些方法。
if (!document.getElementById) return false;
// 判断这些元素是否存在。
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
var xpos = parseInt(elem.style.left);
// 转换成 整数。也就是去掉 px
// parseInt会自动去掉非数字部分。
var ypos = parseInt(elem.style.top);
if (xpos == 200 && ypos == 100) {
return true; //跳出函数
}
if (xpos < 200) {//每次 + 1
xpos++;
}
if (xpos > 200) {
xpos--;
}
if (ypos < 100) {//或者 - 1
ypos++;
}
if (ypos > 100) {
ypos--;
}
elem.style.left = xpos + "px"; // 这里注意把单位 加上
elem.style.top = ypos + "px";
movement = setTimeout("moveMessage()",10); //如果没跳出函数，每过10毫秒调用一次 moveMessage()
}
function addLoadEvent(func) { // 这是一个onload的函数。可以同时加载多个 函数。
var oldonload = window.onload; // 等价于： window.onload = function(){ a(); }
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(positionMessage);
</script>
</head>
<body>
<p id="message">test(等待3秒)</p>
</body>
</html>
如果你是一名jquery的爱好着，想要用jquery写出类似的效果，
可以参考下面的代码：
<!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=gbk" />
<title>Animation</title>
<script src="../jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#message').css({'position':'absolute','left':'50px','top':'100px'})
.animate({ left : 200 ,top :100 }, { queue : false , duration : 2000 });
})
</SCRIPT>
</head>
<body>
<p id="message">test(等待3秒)</p>
</body>
</html>
相信上面的代码 你是完全能看懂的,只不过要稍微花个几分钟时间。
你也许会发现上面的代码 并不通用？
明天我们将做一个通用的 动画函数。88。
关于本站 - 免责声明 - 友情链接 - 提点建议 - 联系我们 - 链接纠错 - 广告投放
Copyright © 2008 All rights reserved.