对联广告jquery代码_对联广告代码-CSDN博客

一、对联广告效果图

二、实现代码

<!DOCTYPE>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
     var duilian = $("div.duilian");
     var duilian_close = $("a.duilian_close");
     
     var window_w = $(window).width();
     if(window_w>1000){duilian.show();}
     $(window).scroll(function(){
         var scrollTop = $(window).scrollTop();
         duilian.stop().animate({top:scrollTop+100});
     });
     duilian_close.click(function(){
         $(this).parent().hide();
         return false;
     });
     
     
 });
 </script>
 <style>
 /**//*下面是对联广告的css代码*/
 .duilian{}{top:100px;position:absolute; width:102px; overflow:hidden; display:none;}
 .duilian_left{}{ left:6px;}
 .duilian_right{}{right:6px;}
 .duilian_con{}{border:red solid 1px; width:100px; height:300px; overflow:hidden;}
 .duilian_close{}{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}
 </style>
 </head>
 
 <body>
 
 <!--下面是对联广告的html代码结构-->
 <div class="duilian duilian_left">
     <div class="duilian_con">对联的内容</div>
     <a href="#" class="duilian_close">X关闭</a>
 </div>
 <div class="duilian duilian_right">
     <div class="duilian_con">对联的内容</div>
     <a href="#" class="duilian_close">X关闭</a>
 </div>
 
 
 <p style="height:1000px;"></p>
 </body>
 </html>

文章转载自： jquery 实现对联广告 http://www.studyofnet.com/news/770.html