jquery对联广告代码

浏览数：31 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>jquery对联广告代码</title>
 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 7 <script type="text/javascript">
 8 $(document).ready(function(){
 9     var duilian = $("div.duilian");
10     var duilian_close = $("a.duilian_close");
11     
12     var window_w = $(window).width();
13     if(window_w>1000){duilian.show();}
14     $(window).scroll(function(){
15         var scrollTop = $(window).scrollTop();
16         duilian.stop().animate({top:scrollTop+260});
17     });
18     duilian_close.click(function(){
19         $(this).parent().hide();
20         return false;
21     });
22     
23     
24 });
25 </script>
26 <style>
27 /*下面是对联广告的css代码*/
28 .duilian{top:260px;position:absolute; width:102px; overflow:hidden; display:none;}
29 .duilian_left{ left:6px;}
30 .duilian_right{right:6px;}
31 .duilian_con{border:#CCC solid 1px; width:100px; height:300px; overflow:hidden;}
32 .duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}
33 </style>
34 </head>
35 
36 <body>
37 <!--下面是对联广告的html代码结构-->
38 <div class="duilian duilian_left">
39     <div class="duilian_con">对联的内容</div>
40     <a href="#" class="duilian_close">X关闭</a>
41 </div>
42 <div class="duilian duilian_right">
43     <div class="duilian_con">对联的内容</div>
44     <a href="#" class="duilian_close">X关闭</a>
45 </div>
46 
47 <p style="height:2000px;"></p>
48 </body>
49 </html>