Javascript学习第二季（实战7）
上章 我们来 的 用javascript做动画效果，没做成通用的。只能单独使用。
今天我们把动画函数做成通用的，可以多次调用。
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=utf-8" />
<title>Message</title>
<script type="text/javascript">
/*
第一个例子，看过后，你会发现原来做动画 这么简单。
这个例子 比 第一个复杂点 ， 抽象化了第一个例子中的方法。
什么是抽象化？
把具体的方法改成通用的方法的过程，叫做抽象化。
也许概念不怎么好理解。
举个例子吧：
function a()
{
var b =document.getElementById("cs");
b.style.color ="red";
}
这个函数只能针对 id为a的 进行 color =red 操作。
如果我们把这个函数抽象化。那么将是怎么样呢？
function a( element , color )
{
var b =document.getElementById(element);
b.style.color = color;
}
看懂了吧。这就是抽象化。
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
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";
moveElement("message",225,25,20);//调用moveElement函数
if (!document.getElementById("message2")) return false;
var elem = document.getElementById("message2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
moveElement("message2",225,75,20);//调用moveElement函数
}
addLoadEvent(positionMessage);// 等价于 window.onload
/*
参数解释:
elementID : 元素的ID
final_x : 最后的x坐标的值。
final_y : 最后的y坐标的值。
interval : 时间间隔。 （建议 取 10或者20）
*/
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);// 转换成 整数。也就是去掉 px
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);
/*
提醒下;
setTimeout 第一个参数是 字符串， 第二个参数是 数值。
*/
}
</script>
</head>
<body>
<p id="message">test1</p>
<p id="message2">test2</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 : 100 , top : 25 }, { queue : false , duration : 1500 , complete : a })
function a(){
$('#message').animate({ left : 225 }, { queue : false , duration : 2500 });
}
$('#message2').css({'position':'absolute','left':'50px','top':'50px'})
.animate({ left : 120 , top: 75 }, { queue : false , duration : 2000 , complete : b })
function b(){
$('#message2').animate({ left : 225 }, { queue : false , duration : 2000 });
}
})
</SCRIPT>
</head>
<body>
<p id="message">test1</p>
<p id="message2">test2</p>
</body>
</html>
代码不是很难，结合注释很快能把程序搞懂。
现在我们把程序改进成通用的了，也知道了什么是抽象化。
明天我们将把动画 程序用在 另一个图片馆 例子中。
来看看 动画 的实战效果。 明天见。
关于本站 - 免责声明 - 友情链接 - 提点建议 - 联系我们 - 链接纠错 - 广告投放
Copyright © 2008 All rights reserved.
点击下载此文件