<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ padding:0px; margin:0px; } ul{ margin:50px auto; 500px; } li{ list-style-type:none; display:inline-block; 45px; height:61px; position:relative; } li div{ position:absolute; left:0px; } img{ 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="19px;"> <div> <img style="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="19px;"> <div> <img style="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); };