位置position:
Position的属性有
static:按有关元素出现的先后顺序出现在浏览器的窗口中;
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。;
relative:除了有position属性外,还可以从文档的正常显示顺序中脱离开来,
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。;
一个位置函数:function positionMessge(){
If(!document.getElementById) return false;
If(!document.gwtElementById("elem")) return false;
Var getID=document.getElementById("elem");
getID.style.position="absolute";
getID.style.tleft="100px";
getID.style.rigth="200px"
····
}
时间setTimeout:
Var setRun= setTimeout("function",interval)----function是将要执行的函数的名字,interval是以毫秒为单位设定需要经过多长时间后开始执行函数。
ClearTimeout(setRun)取消这个函数的运行状态
时间的递增MoveMessage():
为了让元素“动起来”,必须给函数设定时间的变化来控制页面元素的动态
moveMessage()函数来体现:
1)获取元素当前的位置:
getID.style.获得的将是一个字符串,而要的是位置,则需要用parseInt()函数转化数字形式:
var xpos=parseInt(getID.style.left);
var ypos=parseInt(getID.stle.right); `````
2)判断如果该元素已经到达了他的目的地,则退出函数,如果还没到达目的地,则让他靠近 一点点
If(xpos==100||ypos==200){return true;}
If(xpos<100){xpos++;}
If(xpos>100){xpos--;}
ypos也是类似的步骤;
3)把移动后的值赋值给当前的位置:
getID.style.left=xpos+"px";
getID.style.right=ypos+"px";
4)最后执行setRun即可。
代码如下:function moveMessage(){
If(!document.getElementById) return false;
If(!document.gwtElementById("elem")) return false;
Var getID=document.getElementById("elem");
var xpos=parseInt(getID.style.left);
var ypos=parseInt(getID.style.right);
If(xpos==100||ypos==200){return true;}
If(xpos<100){xpos++;}
If(xpos>100){xpos--;}
If(ypos<200){ypos++;}
If(ypos>200){ypos--;}
getID.style.left=xpos+"px";
getID.style.right=ypos+"px";
Var setRun=setTimeout("moveMessage()",200);
}
具体到抽象:MoveElement(elementID,final_x,final_y,interval):
为了让程序具有一般性,应该把具体的参数变成抽象的参数,构造带参函数,
1)设置参数
需要移动的元素的ID:elementID;
目的位置:final_x;final_y;final_z···
两次移动的停顿时间:interval;
2)构造函数:
MoveElement(elemenetID,final_x,[··],interval){
If(!document.getElementById) return false;
If(!document.gwtElementById(elemenetID)) return false;
Var getID=document.getElementById(elemenetID);
var xpos=parseInt(getID.style.left);
var ypos=parseInt(getID.style.right);
If(xpos==final_x||ypos==200){return true;}
If(xpos<final_x){xpos++;}
If(xpos>final_x){xpos--;}
If(ypos<final_y){ypos++;}
If(ypos>final_y){ypos--;}
getID.style.left=xpos+"px";
getID.style.right=ypos+"px";
Var newfunction=MoveElement(elementID,final_x,final_y,interval)
Var setRun=setTimeout(newfunction,interval);
}