1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
6 <title>Document</title>
7 <style>
8 *{margin:0;padding:0}
9 html,body{width:100%;height:100%;overflow: hidden;position:relative}
10 #div1{width:100%;height:100%;background: #f0f;position: absolute}
11 #div2{width:100%;height:100%;background: #00f;position: absolute;left:0}
12 .top{top:100%;}
13 .bottom{top:0}
14 .hide{display: none}
15 </style>
16 <link rel="stylesheet" href="animate.min.css"/>
17 </head>
18 <div id="div1" class="animated">
19 </div>
20 <div id="div2" class=" bottom hide">
21
22 </div>
23 <body>
24 <script src="jquery.js"></script>
25 <script>
26 // $(function(){
27 //
28 // $("#div1").click(function(){
29 // $("#div2").one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘, function() {
30 // $("#div2").removeClass(effect);
31 // });
32 // var effect = ‘animated bounceInUp‘;
33 // $("#div2").removeClass("hide").addClass(effect);
34 // })
35 // $("#div2").click(function(){
36 // $("#div2").one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘, function() {
37 // $("#div2").removeClass(effect).addClass("hide");
38 // });
39 // var effect = ‘animated bounceOutDown‘;
40 // $("#div2").addClass(effect);
41 //
42 // })
43 // })
44 </script>
45 <script>
46 $(function(){
47
48 $("#div1")[0].addEventListener("click",function(){
49 alert(11);
50 $("#div1")[0].removeEventListener("click",arguments.callee,false)
51 },false)
52 })
53 </script>
54 </body>
55 </html>
时间： 2024-10-05 05:00:18