html通过js实现页面加载动画

浏览数：23 / 时间：2015年06月09日

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>天气Demo</title>
 8     <link rel="stylesheet" href="css/dragula.css" type="text/css" media="screen" />
 9     <link rel="stylesheet" href="css/yongjiu.css" type="text/css" media="screen" />
10     <style>
11     /*div{
12         width:100;
13         height:100;
14         background: red;
15         position: relative;
16         animation:mymove 5s infinite;
17     }*/
18     .div1{
19         position:relative;
20         animation:mymove 5s infinite;
21         -moz-animation:mymove 5s infinite; /* Firefox */
22         -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
23         -o-animation:mymove 5s infinite; /* Opera */
24     }
25     @keyframes mymove{
26         0%   {top:0px; left:0px;}
27         25%  {top:0px; left:100px;}
28         50%  {top:100px; left:100px;}
29         75%  {top:100px; left:0px;}
30         100% {top:0px; left:0px;}
31     }
32     @-moz-keyframes mymove /* Firefox */
33 {
34 0%   {top:0px; left:0px;}
35 25%  {top:0px; left:100px;}
36 50%  {top:100px; left:100px;}
37 75%  {top:100px; left:0px;}
38 100% {top:0px; left:0px;}
39 }
40 
41 @-webkit-keyframes mymove /* Safari and Chrome */
42 {
43 0%   {top:0px; left:0px;}
44 25%  {top:0px; left:100px;}
45 50%  {top:100px; left:100px;}
46 75%  {top:100px; left:0px;}
47 100% {top:0px; left:0px;}
48 }
49 
50 @-o-keyframes mymove /* Opera */
51 {
52 0%   {top:0px; left:0px;}
53 25%  {top:0px; left:100px;}
54 50%  {top:100px; left:100px;}
55 75%  {top:100px; left:0px;}
56 100% {top:0px; left:0px;}
57 }
58     </style>
59   </head>
60 <body onload="loding()">
61 <!-- <div class="dragula_parent"> -->
62     <div id="div1">
63         <img src="star.gif" style="width:100%;"/>
64     </div>
65     <div id="div2" style="display:none;">
66     <div class="dragula_wrapper">
67         <div id="left1" class="dragula_container">
68             <div>
69             <!-- <div style="background:red; height:50px; width:50px"> -->
70                 <iframe style="border:2px red dashed" src="http://www.thinkpage.cn/weather/weather.aspx?c=CHXX0008&l=zh-CN&p=MSN&a=1&u=C&s=1&m=0&x=1&d=3&fc=&bgc=&bc=" frameborder="0" scrolling="no" width="200" height="260" allowtransparency="true"></iframe>
71             </div>
72         </div>
73         <div id="right1" class="dragula_container">
74             <div>
75             <!-- <div style="background:blue; height:50px; width:50px"> -->
76                 <iframe src="http://ueditor.baidu.com/ueditor/dialogs/map/show.html#center=108.937459,34.303273&zoom=18&width=530&height=340&markers=108.937899,34.303348&markerStyles=l,A" frameborder="0" width="534" height="344"></iframe>
77             </div>
78         </div>
79     </div>
80     </div>
81 <!-- </div> -->
82 
83 <script type="text/javascript" src="js/dragula.js"></script>
84 <script type="text/javascript">
85 dragula([left1,right1]);
86 function loding(){
87     var input = document.getElementById("div1");
88     input.style.display="none";
89     var input1 = document.getElementById("div2");
90     input1.style.display="inline";
91 }
92 </script>
93 </body>
94 </html>