Question

怎样使用HTML、CSS和JavaScript共同实现：

怎样使用HTML、CSS和JavaScript共同实现：广告图片在整个页面中自由漂浮，碰到浏览器边缘会反弹回来继续自由移动？

Answer 1

假设广告图片为<div id="ad"><img /></div>

CSS使用浮动定位position:fixed;
使图片广告浮在最上层z-index:12;
定位图片广告初始位置top:10px;left:20px;

JavaScript
var ad=document.getElementById("ad");
//获取ad的宽度和高度
wad=ad.offsetWidth;
had=ad.offsetHeight;
//获取屏幕的宽度和高度
w=document.body.clientWidth;
h=document.body.clientHeight;
//假设横向速度为x，纵向速度为y
var x=10;
var y=15;
//函数
function move(){
ad.style.left+=x+"px";
ad.style.top+=y+"px";
if(parseInt(ad.style.left)+wad>=w || parseInt(ad.style.left)<=0){
x=-x;
}
if(parseInt(ad.style.top)+had>=h || parseInt(ad.style.top)<=0){
y=-y;
}
//定时器
setTimeout("move()",1000);

}

//执行函数
move();

Answer 2

您描述的这个效果是碰壁反弹，难度不是很大，主要涉及到JS计时器和边界范围控制，具体可以到HTML5学堂里面查看(网站搜索即可)。