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>
新手参考资料
时间： 2024-10-11 01:03:58