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 判断元素上是否绑定了事件
Oct 28 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
js canvas实现擦除动画
Jul 16 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
js 提交和设置表单的值
2008/12/19 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
化工专业自荐书
2014/06/16 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
深入浅析Django MTV模式
2021/09/04 Python