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



效果图

代码：

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