广告

4.18.1 顶部展开定时自动关闭广告

HTML代码

<div id="top" style="display:none;"><img src="temp/02.jpg" width="980" height="60" /></div>
<div id="banner" style="width:980px; height:291px;display:none;"><img src="temp/01.jpg" width="980" height="291" /></div>

JS代码

$(document).ready(function(){
  $("#banner").slideDown("slow");  /*下拉速度 可自己设置*/
});
function displayimg(){
  $("#banner").slideUp(1000,function(){
  $("#top").slideDown(1000);  /*下拉速度 可自己设置*/
})}
setTimeout("displayimg()",4000);  /*大图显示时间 可自己设置*/

4.18.2 对联广告

X关闭

X关闭

HTML代码

<div class="dual dual_l"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
<div class="dual dual_r"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>

CSS代码

.dual{top:260px;position:absolute; width:102px; overflow:hidden; display:none; z-index:100}
.dual_l{ left:6px}
.dual_r{right:6px}
.dual_con{border:#CCC solid 1px;width:100px; height:300px; overflow:hidden; background-color:#0C9}
.dual_close{width:100%;height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none}

JS代码

var dual = $(".dual");
var dual_close = $("a.dual_close");
var screen_w = screen.width;
if(screen_w>1024){dual.show()}
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    dual.stop().animate({top:scrollTop+260})});
dual_close.click(function(){
    $(this).parent().hide();return false});