技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

网页顶部大横幅#可展开收起#【CSS+jQuery源码】

作者:admin    时间:2020-3-14 11:23:5    浏览:

很多网站在打开时,顶部首先展开一条大横幅,几秒后自动收起,但并非消失,这种广告效果比较好,因为它让人一定注意到它的存在,并看到它的广告内容。本文就介绍一下这个广告的实现方法,使用的是css+jQuery技术,代码很少,并且很简单。

网页顶部大横幅#可展开收起#

网页顶部大横幅#可展开收起#

demo

CSS代码

body {
margin: 0px; padding: 0px;
}
.topBanner .main {
position: relative;
}
.topBanner .bannerMax {
background: url("images/banner_max.jpg") no-repeat top; height: 392px; overflow: hidden; display: none;
}
.topBanner .bannerMax .Btn {
background: url("images/arrow.png") no-repeat; top: 35px; right: 10px; width: 23px; height: 23px; overflow: hidden; position: absolute; cursor: pointer;
}
.topBanner .bannerMin {
background: url("images/banner_min.jpg") no-repeat top; height: 100px; overflow: hidden; display: block;
}
.topBanner .bannerMin .Btn {
background: url("images/arrow.png") no-repeat left -23px; top: 35px; right: 10px; width: 23px; height: 23px; overflow: hidden; position: absolute; cursor: pointer;
}
.topBanner .bannerMax a {
height: 392px; display: block;
}
.topBanner .bannerMin a {
height: 100px; display: block;
}

代码解释

.bannerMax 是展开后的横幅,这里设置高度属性是height: 392px;

.bannerMin 是收起后的横幅,这里设置高度属性是height: 100px;

.Btn 是可点击的“展开/收起”箭头按钮,这里设置它的位置属性是top: 35px; right: 10px;

HTML代码

<DIV class="topBanner">
  <DIV class="bannerMax">
    <DIV class="main">
      <DIV class="Btn"></DIV>
   <A href="http://www.webkaka.com/" target="_blank"></A>
</DIV>
  </DIV>
  <DIV class="bannerMin">
    <DIV class="main">
      <DIV class="Btn"></DIV>
   <A href="http://www.webkaka.com/" target="_blank"></A>
</DIV>
  </DIV>
</DIV>

execcodegetcode

代码解释

class="topBanner"的div定义横幅的位置,class="bannerMax"是展开后横幅的div,class="bannerMin"是收起后横幅的div,class="Btn"是“展开/收起”的箭头按钮图标。

jQuery代码

<SCRIPT type="text/javascript" src="js/jquery-1.9.0.min.js"></SCRIPT>
<script type="text/javascript">
$(document).ready(function(){
 jQuery(function(){
  jQuery(".bannerMax .Btn").click(function(){
    jQuery('.bannerMax').slideUp(500);
    jQuery('.bannerMin').slideDown(500);
  });
  jQuery(".bannerMin .Btn").click(function(){
    jQuery('.bannerMin').slideUp(500);
    jQuery('.bannerMax').slideDown(500);
  });
 });
 setTimeout(function(){
  jQuery('.bannerMin').slideUp(500);
  jQuery('.bannerMax').slideDown(500);
 },500);
 setTimeout(function(){
  jQuery('.bannerMax').slideUp(500);
  jQuery('.bannerMin').slideDown(500);
 },3500);
});
</script>

代码解释

首先要引用jQuery库文件。

jQuery(".bannerMax .Btn").click()是点击“收起”箭头图标时的动画:大横幅向上滑动(slideUp),小横幅向下滑动(slideDown)。

jQuery(".bannerMin .Btn").click()是点击“展开”箭头图标时的动画:小横幅向上滑动(slideUp),大横幅向下滑动(slideDown)。

setTimeout()是打开页面时先“展开”,3.5秒后“收起”的效果。

 

标签: css  横幅  banner  
  • IT热文
  • 站长推荐