jQuery实现首页顶部可伸缩广告特效代码


Posted in Javascript onApril 15, 2015

特效介绍

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

演示图

jQuery实现首页顶部可伸缩广告特效代码

使用方法

1、把下面的CSS样式拷贝到您的html的头部:

<LINK rel=stylesheet type=text/css href="css/style.css">

2、把以下代码拷贝到整个页面顶部,即<body>的下面。

<DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: block" id=js_ads_banner_top>
  <A href="/" target=_blank><IMG src="images/banner_s.jpg" width=960 height=70></A>
</DIV>
<DIV style="MARGIN: 0px auto; WIDTH: 960px; DISPLAY: none" id=js_ads_banner_top_slide>
  <A href="/" target=_blank><IMG src="images/banner_b.jpg" width=960 height=400></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):

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); //2500毫秒(2.5秒)后,小广告收回,大广告伸开,执行时间都是1秒(1000毫秒)
  setTimeout(function(){$slidebannertop.slideUp(1000,function (){$bannertop.slideDown(1000);});},8500); //8.5秒(8500毫秒)之后,大广告收回,小广告展开。
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 #Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
提升python处理速度原理及方法实例
2019/12/25 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
行政人员工作职责
2013/12/05 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
群众路线剖析材料
2014/09/30 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
社区党员干部承诺书
2015/05/04 职场文书
企业年会祝酒词
2015/08/11 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
Python爬虫基础初探selenium
2021/05/31 Python