zoukankan      html  css  js  c++  java
  • jquery两边飘浮的对联广告

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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; 102px; overflow:hidden; display:none;}
     .duilian_left{ left:6px;}
     .duilian_right{right:6px;}
     .duilian_con{border:red solid 1px; 100px; height:300px; overflow:hidden;}
     .duilian_close{ 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>

  • 相关阅读:
    day01
    用表单验证数据(1)
    用表单验证数据
    表单
    ORM作业
    mysql完全卸载大全
    mycat特点及用途
    ajax 跨域请求解决方案
    myeclipse使用SVN团队开发
    配置mybatis错误总结
  • 原文地址:https://www.cnblogs.com/scgw/p/2812296.html
Copyright © 2011-2022 走看看