jquery对联广告代码
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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。