前端实现图片悬浮_js实现的简单图片浮动效果完整实例

本文实例讲述了js实现的简单图片浮动效果。分享给大家供大家参考，具体如下：

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

1、现有一个广告div，就是我们要控制的，它的起始点(0,0)

2、设定横向和纵向的速度

3、控制广告div移动

1)广告div是否达到边界

2)如果到达边界后，我们设置速度反向移动

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

div{

position:absolute;

}

img{

position:absolute;

filter:alpha(opacity=100);/* IE */

-moz-opacity:1;/* Moz + FF */

opacity: 1;/* 支持CSS3的浏览器(FF 1.5也支持)*/

}

//获取图片所在的div对象

var img=document.getElementById("divimg");

//设置div 左上角坐标 ，起始点的坐标

var x=10,y=10;

//设置图片的行进速度

var xSpeed=2,ySpeed=1;

//设置图片的最大浮动的高度和宽度

var w=document.doc