jquery实现对联广告的方法

  本文实例讲述了jquery实现对联广告的方法。分享给大家供大家参考。具体实现方法如下:

  

复制代码 代码如下:
<!DOCTYPE>

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="js/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程序设计有所帮助。