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 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
详解JS函数重载
Dec 04 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
shiro授权的实现原理
Sep 21 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
javascript的push使用指南
2014/12/05 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
js+html制作简单验证码
2017/02/16 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
python简单文本处理的方法
2015/07/10 Python
python之pandas用法大全
2018/03/13 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
实例详解Python模块decimal
2019/06/26 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
PHP统计代码行数的小代码
2019/09/19 Python
基于python3生成标签云代码解析
2020/02/18 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
评析教师个人的自我评价
2014/02/19 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Python max函数中key的用法及原理解析
2021/06/26 Python
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android