最简单易用的jquery对联广告代码

发布时间:2019-08-18编辑:脚本学堂
jquery对联广告代码,在网页中显示左右两侧对称的对联广告效果,用jquery实现效果更佳,这里分享的这个对联广告代码,可关闭、可随屏幕滚动,兼容多个浏览器。

jquery对联广告代码:可关闭、可随屏幕滚动。

1、html部分
 

复制代码 代码示例:
<!--对联广告HTML Start-->
<div class="duilian duilian_left">
<div class="duilian_con"><a href="http://www.jb200.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.jb200.com" target="_blank"><img src="Jidinghe.jpg"></a></div>
<a href="#" class="duilian_close">关闭</a>
</div>
<!--对联广告HTML End-->

2、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;}

3、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;
 }); 
 });