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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
js创建数组的简单方法
2016/07/27 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python Pygame的具体使用讲解
2017/11/03 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python实现批量图片格式转换
2020/06/16 Python
如何更优雅地写python代码
2019/07/02 Python
解决c++调用python中文乱码问题
2020/07/29 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
自荐书格式
2013/12/01 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android