您的位置：首页 > 其它

利用window对象实现一个图片的浮动效果

2012-02-22 17:48 555 查看

实现图片的浮动效果需要三步：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航