广告
文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/
4.16.1 顶部展开定时自动关闭广告
HTML
JS
<div id="top" style="display:none;"> <img src="//images.h-ui.net/www/AD-1000x60.gif" width="1000" height="60" /> </div> <div id="banner" style="width:1000px;display:none;"> <img src="//images.h-ui.net/www/AD-1000x300.gif" width="1000" height="300" /> </div>
$(function(){
$("#banner").slideDown("slow"); /*下拉速度 可自己设置*/
});
function displayimg(){
$("#banner").slideUp(1000,function(){
$("#top").slideDown(1000); /*下拉速度 可自己设置*/
})}
setTimeout("displayimg()",4000); /*大图显示时间 可自己设置*/
4.16.2 对联广告
HTML
SCSS
CSS
JS
<div class="hui-couplets-ad hui-couplets-ad-l"> <div class="dual_con"><img src="//images.h-ui.net/www/AD-100x300.gif" width="100" height="300"></div> <a href="#" class="hui-couplets-ad-close">X关闭</a> </div> <div class="hui-couplets-ad hui-couplets-ad-r"> <div class="dual_con"><img src="//images.h-ui.net/www/AD-100x300.gif" width="100" height="300"></div> <a href="#" class="hui-couplets-ad-close">X关闭</a> </div>
.hui-couplets-ad {
top: 260px;
position: absolute;
width: 102px;
overflow: hidden;
display: none;
z-index: 100;
&.hui-couplets-ad-l {
left: 6px;
}
&.hui-couplets-ad-r {
right: 6px;
}
.hui-couplets-ad-content {
border: #CCC solid 1px;
width: 100px;
height: 300px;
overflow: hidden;
background-color: #0C9;
}
.hui-couplets-ad-close {
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
font-size: 13px;
color: #555;
text-decoration: none;
}
}
.hui-couplets-ad {
top: 260px;
position: absolute;
width: 102px;
overflow: hidden;
display: none;
z-index: 100;
}
.hui-couplets-ad.hui-couplets-ad-l {
left: 6px;
}
.hui-couplets-ad.hui-couplets-ad-r {
right: 6px;
}
.hui-couplets-ad .hui-couplets-ad-content {
border: #CCC solid 1px;
width: 100px;
height: 300px;
overflow: hidden;
background-color: #0C9;
}
.hui-couplets-ad .hui-couplets-ad-close {
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
font-size: 13px;
color: #555;
text-decoration: none;
}
var coupletsAd = $(".hui-couplets-ad");
var coupletsClose = $("a.hui-couplets-ad-close");
var screen_w = screen.width;
if(screen_w > 1024){
coupletsAd.show()
}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
coupletsAd.stop().animate({
top:scrollTop+260
});
});
coupletsClose.click(function(){
$(this).parent().hide();
return false
});