运动框架实现淡入淡出的焦点图

 

<!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 type="text/css">
   ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
   #main{
       overflow: hidden;
       width:500px;
       position: relative;
   }
   #tab{
    overflow: hidden;
    width:100%;
    height: 40px;
       position: absolute;
       bottom: 20px;
       left:0;
       z-index:999;
}
 #tab li{
       width:50px;
       height: 40px;
     display:inline;
     float: left;
     background: #ffff00;
     text-align: center;
     line-height: 40px;
     margin-right: 10px;
     cursor: pointer;
   }
   #tab li.current{
       background:red;
   }
    #tab_Cont{
        overflow: hidden;
        width: 500px;
    }
   #tab_Cont div{
       display:none;
       width: 500px;
       height:300px;
       background:#666;
       opacity:0;
   }
  
</style>
<script type="text/javascript">

window.onload=function(){
        var oMain=document.getElementById('main');
        var oNav=document.getElementById('tab');
        var aLi=oNav.getElementsByTagName('li');
        var aCont=document.getElementById('tab_Cont');
        var aContBox=aCont.getElementsByTagName('div');
        var timer=null;
        var i=0;
        var iNow=0;

        function goTo(){
            for(i=0;i<aLi.length;i++){
                aLi[i].className='';
                aContBox[i].style.display='none';
                aContBox[i].style.opacity=0;
            }
            aLi[iNow].className='current';
            aContBox[iNow].style.display='block';
            startMove(aContBox[iNow],{opacity:100})

        }
        function run(){
            if(iNow==aLi.length-1){
                iNow=0;
            }else{
                iNow++;
            }
           goTo();
        }

        for(i=0;i<aLi.length;i++){
            aLi[0].className='current';
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                iNow=this.index;
                goTo()
            }
        }

        timer=setInterval(run,3000);

        oMain.onmouseover=function(){
            clearInterval(timer);
        }
        oMain.onmouseout=function(){
            timer=setInterval(run,3000);
        }


    function getStyle(obj,attr){
       if(obj.currentStyle){
           return obj.currentStyle[attr]
       }else{
           return getComputedStyle(obj,false)[attr];
       }
    }


    function startMove(obj,json,fn){
        clearInterval(obj.timer);
        obj.timer=setInterval(function (){
            var bShop=true;
            for(var attr in json){
                var iCur=0;

                if(attr=='opacity'){
                    iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                }else{
                    iCur=parseInt(getStyle(obj,attr)) || 0;
                }


                var iSpeed=(json[attr]-iCur)/16;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);


                if(iCur!=json[attr]){
                    bShop=false;
                }

                if(attr=='opacity'){
                    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                    obj.style.opacity=(iCur+iSpeed)/100;
                }else{
                    obj.style[attr]=iCur+iSpeed+'px';
                }

            };

            if(bShop){
                clearInterval(obj.timer);
                if(fn){
                    fn()
                }
            };

        }, 30)
    }
}
</script>
</head>

<body>
<div id="main">
<ul id="tab">
    <li>123</li><li>456</li><li>789</li><li>789</li>
</ul>
   <div id="tab_Cont">
       <div style="display: block;opacity:1">1</div>
       <div>2</div>
       <div>3</div>
       <div>4444</div>
   </div>
</div>
</body>
</html>

 

 

 

 

posted @ 2013-07-17 17:43  赵小磊  阅读(160)  评论(0)    收藏  举报
回到头部