jquery 实现对联广告

更多时间：2015-1-13 类别：Web前端浏览量：1113

jquery 实现对联广告

jquery 实现对联广告

一、对联广告的实现代码

HTML 代码复制


<!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 = $("li.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代码结构-->
 <li class="duilian duilian_left">
     <li class="duilian_con">对联的内容</li>
     <a href="#" class="duilian_close">X关闭</a>
 </li>
 <li class="duilian duilian_right">
     <li class="duilian_con">对联的内容</li>
     <a href="#" class="duilian_close">X关闭</a>
 </li>
 
 
 <p style="height:1000px;"></p>
 </body>
 </html>

二、对联广告效果图

标签：jquery

上一篇：C# 获取磁盘空间大小

下一篇：js实现分页

您可能感兴趣

jquery 实现对联广告

jquery 实现对联广告

热门推荐

排行榜