<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#wrap{
position:relative;
border:1px #000 solid;
height:50px;
width:640px;
margin:200px auto;
}
#bg{
position:absolute;
top:0px;
left:0px;
height:50px;
width:0px;
background:pink;
}
span{
width:50px;
height:50px;
font-size:28px;
line-height:50px;
text-align:center;
position:absolute;
top:0px;
}
</style>
<script src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
var ospan = document.getElementsByTagName('span');
var timer = null;
var num = 0;
for ( var i = 0; i < ospan.length; i++)
{
ospan[i].style.left = 20 + i*55 +'px';
}
document.onclick = function ()
{
var ospan = document.getElementsByTagName('span');
var obg = document.getElementById('bg');
clearInterval(timer);
domove(obg,'width',50,90,640);
opacity(obg,10,0,150);
timer = setInterval(function()
{
domove(ospan[num],'top',10,50,-150);
opacity(ospan[num],10,0,80);
num++;
if(num==ospan.length)
{
clearInterval(timer);
}
},50)
};
};
</script>
</head>
<body>
<div id="wrap">
<div id="bg"></div>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
<span>+1</span>
</div>
</body>
</html>
function getstyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
function domove (obj,attr,step,frequency,target,endfn)
{
step = parseInt(getstyle(obj,attr))<target?step:-step;
clearInterval(obj.timer);
obj.timer = setInterval( function ()
{
var speed = parseInt(getstyle(obj,attr)) + step;
if(step>0&&speed>target||step<0&&speed<target)
{
speed = target;
}
obj.style[attr] = speed + 'px';
if( speed == target )
{
clearInterval(obj.timer);
endfn&&endfn();
}
},frequency);
};
function opacity(obj,step,target,frequency,endfn)
{
var currentOpacity = getstyle(obj,'opacity') * 100;
step = currentOpacity < target?step:-step;
clearInterval(obj.opacity)
obj.opacity = setInterval (function ()
{
currentOpacity = getstyle(obj,'opacity') *100;
var nextOpacity = currentOpacity + step;
if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
{
nextOpacity = target;
}
obj.style.opacity = nextOpacity/100;
obj.style.filter = 'alpha(opacity:)' + nextOpacity +')';
if(nextOpacity == target )
{
clearInterval(obj.opacity);
endfn&&endfn();
}
},frequency);
};
function shake(obj,attr,endfn)
{
if( obj.shaked ) { return; }
obj.shaked = true;
var num = 0;
var timer = null;
var arr = [];
var pos = parseInt(getstyle(obj,attr));
for( var i = 20; i > 0; i-=2 )
{
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shake);
obj.shake = setInterval(function ()
{
obj.style[attr] = pos + arr[num] +'px';
num++;
if(num==arr.length)
{
clearInterval(obj.shake);
endfn&&endfn();
obj.shaked = false;
}
},50);
};
