jquery实现的Banner广告收缩效果代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了jquery实现的Banner广告收缩效果代码。分享给大家供大家参考。具体如下:

这里演示一个Banner广告收缩效果,点开后,网页显示大广告,用鼠标点击“关闭”后,广告会收缩上去,此效果已在各大网站见到过,欢迎借鉴使用。

运行效果截图如下:

jquery实现的Banner广告收缩效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>一个Banner广告收缩效果</title>
<style type="text/css">
*{margin:0; padding:0;}/*为了方便 直接这样重置了*/
#main{margin:0 auto; width:960px;}
#banner{display:none; margin:0 auto; width:960px; height:160px; background:url(images/banner.png) no-repeat; position:relative;}
#close{display:block; width:50px; height:22px; text-align:center; line-height:22px; border:1px #ddd solid; background:#000; color:#fff; font-size:12px; float:right; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$
(
function()
{
$("#banner").slideDown();
var Up=function(){$("#banner").slideUp(1500)}
setTimeout(Up,3000);
$("#close").click
(
function()
{
$("#banner").slideToggle
(
600,function()
{
if($("#banner").css("display") == "none")
{
$("#close").text("打开");
}
else
{
$("#close").text("关闭");
}
}
);
}
);
}
);
</script>
</head>
<body>
<div id="main">
<div id="banner"></div>
<span id="close">关闭</span>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
js实现拉幕效果的广告代码
Sep 02 #Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 #Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 #Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 #Javascript
You might like
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python实现折半查找和归并排序算法
2017/04/14 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
jupyter实现重新加载模块
2020/04/16 Python
python3中sys.argv的实例用法
2020/04/24 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
学生会竞选自荐信
2013/10/12 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
摘录式读书笔记
2015/07/01 职场文书