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 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 var duilian = $("div.duilian"); 9 var duilian_close = $("a.duilian_close"); 10 11 var window_w = $(window).width(); 12 if(window_w>1000){duilian.show();} 13 $(window).scroll(function(){ 14 var scrollTop = $(window).scrollTop(); 15 duilian.stop().animate({top:scrollTop+100}); 16 }); 17 duilian_close.click(function(){ 18 $(this).parent().hide(); 19 return false; 20 }); 21 22 23 }); 24 </script> 25 <style> 26 /*下面是对联广告的css代码*/ 27 .duilian{top:100px;position:absolute; 102px; overflow:hidden; display:none;} 28 .duilian_left{ left:6px;} 29 .duilian_right{right:6px;} 30 .duilian_con{border:red solid 1px; 100px; height:300px; overflow:hidden;} 31 .duilian_close{ 100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;} 32 </style> 33 </head> 34 35 <body> 36 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> 52 53 54 <p style="height:1000px;"></p> 55 </body> 56 </html>