11JQuery笔记----------------------动态创建小广告的案例 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script src="jquery-1.8.3.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             //向页面添加一个div的层，并设置div的属性
 9             $(':button').click(function () {
10                var dvObj= $('<div style="height:300px;width:300px;background-color:orange;position:absolute;right:0px;bottom:0px;"></div>').appendTo($('body'));
11                //单击x号的时候，关闭广告
12                $('<span style="float:right;cursor:pointer">x</span>').click(function () {
13                    $(this).parent().remove();
14                }).appendTo(dvObj);
15             });
16         });
17     </script>
18 </head>
19 <body>
20     <input type="button" name="name" value="来一个小广告" />
21 </body>
22 </html>

 

posted on 2016-01-12 16:51  努力的活着_在人间  阅读(154)  评论(0)    收藏  举报

导航