位置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);
}
分享到:
相关推荐
第08章-利用JavaScript实现动画效果.ppt
其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果。 这个实例的效果是点击网页上的“开始移动”按钮,则...
css+javascript 实现扇形导航,有动画效果,从找到到收回,可以直接下载使用
javascript实现缓动动画效果 本文实例为大家分享了javascript实现缓动动画效果的具体代码,供大家参考,具体内容如下 实现思路 1、主要使用setInterval定时函数 2、给需要动画的元素添加绝对定位和偏移量,注意...
分四步讲解本动画的实现:一是用Javascript制作动画-生成图象数组 、二是设置图象的位置、三是现在开始演示动画、四是用Javascript制作的闪烁动画效果,通过一步一步的制作,让朋友们对JS有更深层次的了解。
javascript动画效果的实现.pdf
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现_.docx
JavaScript实现新浪微博新发一条微薄,微博总数文字放大显示动画效果!!
HTML5实现DNA螺旋动画效果演示.zip
使用javascript实现一个小动画,也即月食效果,主要掩饰了canvas机制和graphics等应用.
可以通过修改代码实现雪花有白色转变为彩色的雪花,具体函数已经写好,不过没有启用。
boomJS, JavaScript实现一个有趣的浏览器图片爆炸动画效果
Javascript实现的相册翻转效果,很漂亮很实用,可以内嵌入自己的网页中,实现网页的美化,也可以学习模仿
flash做的资源,把效果导成了图片,JavaScript+html5实现的动画效果,
JavaScript实现表格动画渐变特效,点击表格表头,表格内容会以线条方框动画的形式出现,从截图可看出大概的模样,不过最好是下载本示例源码,亲自体验哦,可学习一下JS如何生成动画效果。
第10章 用JavaScript实现动画效果 10.1 何为动画 10.2 实用的动画 10.3 改进动画效果 10.4 最后的优化 10.5 小结 第11章 学以致用:JavaScript网站设计实战 11.1 案例背景介绍 11.2 页面视觉...
AutoType 原生 JavaScript 实现的自动打字效果
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在...