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

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

HTML:

<!--对联广告HTML Start-->   <div class="duilian duilian_left">       <div class="duilian_con"><a href="http://laoji.org" 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://laoji.org" 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;       });     });    
这个例子还用多解释么。。

腾讯云限时秒杀【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】