特效介绍
麦包包首页顶部广告代码仿麦包包首页顶部伸缩广告jQuery广告代码。页面载入完成后,2.5秒后会自动放大广告显示,页面内容自动向下延伸。显示8.5秒后自动收回,放小显示。
演示图

使用方法
1、把下面的CSS样式拷贝到您的html的头部:
2、把以下代码拷贝到整个页面顶部,即
的下面。
1 2 3 4 5 6 7 8 | <DIV style= "MARGIN: 0px auto; WIDTH: 960px; DISPLAY: block" id=js_ads_banner_top>
<A href= "/" target=_blank><img src= "/static/imghw/default1.png" data-src= "images/banner_s.jpg" class = "lazy" style= "max-width:90%" jQuery实现首页顶部可伸缩广告特效代码_jquery" ></A>
</DIV>
<DIV style= "MARGIN: 0px auto; WIDTH: 960px; DISPLAY: none" id=js_ads_banner_top_slide>
<A href= "/" target=_blank><img src= "/static/imghw/default1.png" data-src= "images/banner_b.jpg" class = "lazy" style= "max-width:90%" jQuery实现首页顶部可伸缩广告特效代码_jquery" ></A>
</DIV>
<SCRIPT type=text/javascript src= "jquery/jquery-1.8.3.min.js" > </SCRIPT>
<SCRIPT type=text/javascript src= "js/js.js" > </SCRIPT>
|
登录后复制
3、js代码分析(js.js):
1 2 3 4 5 | if ($( "#js_ads_banner_top_slide" ).length){
var $slidebannertop = $( "#js_ads_banner_top_slide" ), $bannertop = $( "#js_ads_banner_top" );
setTimeout( function (){ $bannertop .slideUp(1000); $slidebannertop .slideDown(1000);},2500);
setTimeout( function (){ $slidebannertop .slideUp(1000, function (){ $bannertop .slideDown(1000);});},8500);
}
|
登录后复制
本站下载 演示地址
以上所述就是本文的全部内容了,希望大家能够喜欢。