滚动的时钟 

<!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);
};

 

posted @ 2014-12-25 11:47  mayufo  阅读(201)  评论(0)    收藏  举报