广告
文章转载,请注明出处 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 });