<style type="text/css"> *{margin: 0; padding: 0;} #f {position: absolute;} #btn{position: absolute;left: 186px;} </style> <body style="height: 2000px;"> <div id="f"> <img src="img/banner.jpg" width="200px"height="100px"/> <button id="btn">×</button> </div> </body> <script type="text/javascript"> var w=document.body.clientWidth-200;//自身宽度减去图片本身的宽度 var h=document.documentElement.clientHeight-100;//自身高度减去图片本身的高度 var x=0,y=0;//原点 var xs=2,ys=1;//移动的坐标(2,1) var d=document.getElementById("f"); var timer; //定义移动函数,实现图片移动 function fly(){ if (x<0 || x>w) xs=-xs; if (y<0 || y>h) ys=-ys; x=x+xs; y=y+ys; d.style.left=x+'px'; d.style.top=y+'px'; timer= setTimeout("fly()",10); } fly(); //叉号按钮 var btn=document.getElementById("btn"); btn.onclick=function(){ d.style.display="none"; } //鼠标放上图片 d.onmouseover=function(){ clearTimeout(timer); } //鼠标离开图片 d.onmouseout=function(){ fly(); } </script>