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