在网页上显示漂浮移动效果

效果图

代码：

< div id = " sa " style = " position:absolute; left=0; top=0 " >
< a href = " http://www.cnblogs.com/happygx " target = " _blank " >< img src = " qq.png " /> </ a >

</ div >

< script type = " text/javascript " >

var dirX = 1 ;
var DirY = 1 ;
var Xpos = 0 , Ypos = 0 ;
sa.style.top = 0 ;
document.body.all.sa.style.left = 0 ;
// document.body.all("sa").style.visibility="visible";visibility:hidden;
setInterval( " dd() " , 10 );
function dd() {
Xpos += 2 * dirX;
Ypos += 2 * DirY;
sa.style.top = Xpos;
sa.style.left = Ypos;
// 当X方向到达时反向
if (Xpos <= 0 || Xpos + sa.offsetWidth >= document.body.clientHeight) {
dirX = - dirX ;
}
// 当y方向到达时反向
if (Ypos <= 0 || Ypos + sa.offsetHeight >= document.body.clientWidth) {
DirY = - DirY ;
}
}
</ script >

转载于:https://www.cnblogs.com/happygx/archive/2011/05/12/2044378.html