<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0px;
margin:0px;
}
ul{
margin:50px auto;
width:500px;
}
li{
list-style-type:none;
display:inline-block;
width:45px;
height:61px;
position:relative;
}
li div{
position:absolute;
left:0px;
}
img{
width:45px;
height:61px;
}
</style>
<script type="text/javascript" src="float.js">
</script>
<script type="text/javascript">
window.onload = function ()
{
var oul = document.getElementsByTagName('ul')[0];
var oli = document.getElementsByTagName('li');
setInterval(fntime,1000);
function fntime()
{
var mytime = new Date();
var ihourse = mytime.getHours();
var imintues = mytime.getMinutes();
var iseconds = mytime.getSeconds();
var str = totwo(ihourse)+':'+totwo(imintues)+':'+totwo(iseconds);
function totwo(n)
{
return n < 10?'0'+n:''+n;
};
for(var i = 0; i < oli.length; i++ )
{
fnfilp(oli[i],i);
}
function fnfilp (li,idx)
{
var odiv = li.getElementsByTagName('div')[0];
var oimg = li.getElementsByTagName('img');
if(str.charAt(idx)==':')
{
oimg[0].src = 'img/second1.png';
setTimeout(function()
{
oimg[0].src = 'img/second2.png';
},500);
}
else
{
oimg[1].src = 'img/'+ str.charAt(idx) +'.png';
if(oimg[1].src != oimg[0].src )
{
domove(odiv,'top',10,30,-70,function ()
{
oimg[0].src= oimg[1].src;
odiv.style.top = '0px';
})
}
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<div>
<img src="img/0.png">
<img src="img/0.png">
</div>
</li>
<li>
<div>
<img src="img/0.png">
<img src="img/0.png">
</div>
</li>
<li style="width:19px;">
<div>
<img style="width:19px;" src="img/second1.png">
</div>
</li>
<li>
<div>
<img src="img/0.png">
<img src="img/0.png">
</div>
</li>
<li>
<div>
<img src="img/0.png">
<img src="img/0.png">
</div>
</li>
<li style="width:19px;">
<div>
<img style="width:19px;" src="img/second1.png">
</div>
</li>
<li>
<div>
<img src="img/0.png">
<img src="img/0.png">
</div>
</li>
<li>
<div>
<img src="img/0.png">
<img src="img/0.png">
</div>
</li>
</ul>
</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);
};
