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管理作用域的问题
Apr 10 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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如何解决网站大流量与高并发的问题
2011/06/25 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
JS的replace方法介绍
2012/10/20 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python实现完整的事务操作示例
2017/06/20 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
毕业设计说明书
2014/05/07 职场文书
个人考核材料
2014/05/15 职场文书
经济管理自荐书
2014/06/09 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技