利用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; }); });
这个例子还用多解释么。。