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

效果图



代码：

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