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 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="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; 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; 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>
新手参考资料