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

效果图

代码：

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