addEventlistener监听的事件完成一次后自动取消与jquery的one方法比较；animate动画制作，arguments.callee的用法...

最新推荐文章于 2024-12-03 17:33:38 发布

转载最新推荐文章于 2024-12-03 17:33:38 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/suoking/p/5141355.html

本文介绍了一个使用HTML和CSS实现的页面布局示例，并通过jQuery添加了点击事件及简单的动画效果。页面包含两个全屏div元素，通过不同的CSS类实现动画切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>