注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

HTML5淡入淡出效果  

2013-05-23 11:52:25|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
HTML5淡入淡出效果 - Diligent - PHP开发那些事儿
 <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>RZT</title>
        <script type="text/javascript">
            window.onload = function(){
                var remoteData = '{success: true,data: ["\u81ea\u52a8\u5316\u65e5\u62a5\u72b6\u6001\u4f30\u8ba1\u9065\u6d4b\u5408\u683c\u7387\u5e73\u5747\u503c,92","\u81ea\u52a8\u65e5\u62a5AGC\u529f\u80fd\u5f02\u5e38\u6b21\u6570,0","\u81ea\u52a8\u65e5\u62a5PMU\u6570\u636e\u4e2d\u65ad\u65f6\u95f4,0","\u81ea\u52a8\u5316\u65e5\u62a5\u5b9e\u65f6\u6570\u636e\u5f02\u5e38\u65f6\u95f4,0","\u81ea\u52a8\u5316\u65e5\u62a5\u9065\u4fe1\u53d8\u4f4d\u6b21\u6570,0","\u7cfb\u7edf\u91cf\u6d4b\u5e73\u8861\u7387\u7edf\u8ba1,0"]}';
            
                   eval('var remoteDataObj = ' + remoteData);

                   var data = remoteDataObj.data;

                var trArr = [];
                for(var i = 0;i < data.length;i++){
                    var tmpArr = data[i].split(',');
                    
                    var trObj = document.createElement('tr');
                    trObj.setAttribute('class','animation');
                    
                    var tdObj1 = document.createElement('td');
                    tdObj1.style.width = '360px';
                    tdObj1.style.background = i % 2 ? 'gold' : 'darkcyan';
                    tdObj1.style.borderRight = '2px solid white';
                    tdObj1.innerHTML = tmpArr[0].replace(/["自动化日报","自动日报"]/g,'');

                    var tdObj2 = document.createElement('td');
                    tdObj2.style.background = i % 2 ? 'gold' : 'darkcyan';
                    tdObj2.innerHTML = tmpArr[1];

                    trObj.appendChild(tdObj1);
                    trObj.appendChild(tdObj2);

                    trArr.push(trObj);
                }


                var intervalFlag = setInterval(function(){
                    if(trArr.length){
                        document.getElementById('table_d5000').appendChild(trArr.splice(0,1)[0]);
                    }else{
                        clearInterval(intervalFlag);
                    }
                },1000);
                
            }
        </script>
        
        <style type="text/css">
            th {
                text-align: center;
                padding: 5px;
                font-size: 22px;
                font-weight: bold;
                border-bottom: 2px solid white;
            }
            td {
                text-align: center;
                padding: 5px;
                border-bottom: 2px solid white;
                font-size: 18px;
            }
            
            @-webkit-keyframes fadeIn {
                0% {
                    opacity: 0; /*初始状态 透明度为0*/
                }
                100% {
                    opacity: 1; /*结尾状态 透明度为1*/
                }
            }
            
            .animation {
                -webkit-animation-name: fadeIn; /*动画名称*/
                -webkit-animation-duration: 1s; /*动画持续时间*/
                -webkit-animation-iteration-count: 1; /*动画次数*/
                -webkit-animation-delay: 0s; /*延迟时间*/}
            }
        </style>
    </head>
    <body>
        <table id='table_d5000' style="padding: 0 20px 20px 20px;" width=100%>
        <tr><th id="num_0" colspan=2>D5000关键信息</th></tr>
        <tr style="background: #333;color: white;"><td width=360 style="border-right: 2px solid white;">名称</td><td>值</td></tr>
        </table>
    </body>
</html>
  评论这张
 
阅读(3989)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017