实现图片的浮动效果需要三步：
1，现有个广告div,就是其实点（0,0）
2，设置横向和纵向的速度
3，控制广告div移动
1）广告div是否到达边界
2）如果到达以后，我们按照这个速度反向移动
<head>
<div id="img">
<img scr="" width="" height="">
</div>
//获取图片所在的div对象
var img=document.getElementById("img");
//设置div起始点的坐标起始点（0,0）
var x=0,y=0;
//设置图片的行进速度
var xSpeed=2,ySpeed=1;
var w=document.getElement.availWidth-130,h=window.sreen.availHeight-150;
function floatimg(){
//比较图片是否到达边界
//如果到达边界以后，我控制图片改变方向
if(x>w||x<0) xSpeed= -xSpeed;
if(y>h||y<0) ySpeed= -ySpeed;
//如果没有到达边界，设置图片的左上角的坐标
//设置坐标值，起始坐标+速度
x+=ySpeed;
y+=ySpeed;
img.style.top=y+"px";
img.style.left=x+"px";
setTimeout("floatimg()",40);
}
floatimg();
</script>
</body>
</html>
扫一扫
1715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
