在網頁上顯示漂浮移動效果

效果圖

代碼：

<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>