jQuery实现简约的对联广告效果

   本例将利用jquery实现可关闭、可随屏幕滚动的简约对联广告   ,兼容各个浏览器

HTML:

<!--对联广告HTML Start-->
 <div class="duilian duilian_left">
     <div class="duilian_con"><a href="http://www.158code.com" target="_blank"><img src="Jidinghe.jpg"></a></div>
     <a href="#" class="duilian_close">关闭</a>
 </div>
 <div class="duilian duilian_right">
     <div class="duilian_con"><a href="http://www.158code.com" target="_blank"><img src="Jidinghe.jpg"></a></div>
     <a href="#" class="duilian_close">关闭</a>
 </div>
<!--对联广告HTML End-->

css:

 /*下面是对联广告的css代码*/
 .duilian{top:200px;position:absolute; width:150px; overflow:hidden; display:none;}
 .duilian_left{ left:6px;}
 .duilian_right{right:20px;}
 .duilian_con{border:#ddd solid 1px; width:150px; height:210px; overflow:hidden;}
 .duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;background-color:#eee;}

Jquery:

 $(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+200});
     });
     duilian_close.click(function(){
         $(this).parent().hide();
         return false;
     });  
 });

这个例子还用多解释么。。 懂的自然懂 ，直接看DEMO吧

/*************************火柴提供的DEMO***************************/

DEMO              Download