只要一个层设置了背景图片就可以了
js代码如下
本代码用到了jquery了
function floatMove(did,h,w)
{
this.Obj = $("#"+did);
this.tdir = this.ldir = 1;
var THIS = this;
this.init = function()
{
var p = this.Obj.css("backgroundPosition")
if(p)
{
p = p.split(" ");
this.top = parseInt(p[0]);
if(isNaN(this.top)) this.top = 0;
this.left = parseInt(p[1]);
if(isNaN(this.left)) this.left = 0;
}
else
{
this.top = this.left = 0;
}
}
this.getRnd = function()
{
var rnd = Math.random()*30;
if(rnd < 15)
return 1;
else if(rnd < 30)
return 0;
}
var move = this.move = function(){
this.init();
this.top = this.top + this.getRnd()*this.tdir;
while(Math.abs(this.top) > h)
{
this.tdir = this.tdir * -1;
this.top = this.top + this.getRnd()*this.tdir;
}
this.left = this.left + this.getRnd()*this.ldir;
while(Math.abs(this.left) > w)
{
this.ldir = this.ldir * -1;
this.left = this.left + this.getRnd()*this.ldir;
}
this.Obj.css("backgroundPosition",this.top+"px "+this.left+"px");
setTimeout(function(){move.apply(THIS);},20);
}
}
调用代码如下
$().ready(function(){
new floatMove('bgleft',10,10).move();//bgleft要移动层的id,第一个数字是垂直可移动的范围,第二个数字是水平 可移动的范围
})
在写这个代码的时候还遇到了一点小问题跟大家分享一下
在获取backgroundPositionX时在ie8下没有问题,可是在firefox下就是取不到啊
没办法了 只能取 backgroundPosition 然后自己处理才没有出现问题啊
JavaScript 实现背景图片随机浮动
最新推荐文章于 2023-12-29 18:04:51 发布