当鼠标在图片上方时,图片停止漂浮,点击关闭按钮可隐藏图片,代码简单,直接插入网页更换成自己的漂浮图片就可以使用。
<body> <div id="float" style=" position:absolute; z-index:3"> <img id="img1" src="http://www.75271.com/images/logo.png" style=" border:1px #ccc solid" /><img id="img2" onClick="float.style.display='none'" src="关闭图片" style=" position:absolute; margin-left:-13px;" /> </div> <script type="text/javascript"> var xPos=0; var yPos=0; var directionX=true; var directionY=true; var step=1; var speed=1; var float=document.getElementById("float"); function move(){ var height=document.documentElement.clientHeight; var width=document.documentElement.clientWidth; var imgHeight=float.offsetHeight; var imgWidth=float.offsetWidth; float.style.left=xPos+document.documentElement.scrollLeft+"px"; float.style.top=yPos+document.documentElement.scrollTop+"px"; if(directionX){xPos=xPos+step;}else{xPos=xPos-step;} if(xPos<=0){xPos=0;directionX=true;} if(xPos>=width-imgWidth){xPos=width-imgWidth;directionX=false;} if(directionY){yPos=yPos+step;}else{yPos=yPos-step;} if(yPos<=0){yPos=0;directionY=true;} if(yPos>=height-imgHeight){yPos=height-imgHeight;directionY=false;} t=setTimeout(move,speed); } float.onmouseover=function(){clearTimeout(t);} float.onmouseout=function(){t=setTimeout("move()",speed);} window.onload=move(); </script> </body>