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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JavaScript的词法结构精华篇
Oct 17 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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模板引擎SMARTY
2006/10/09 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python字符串替换实例分析
2015/05/11 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
人事主管的岗位职责
2013/11/16 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
办理信用卡工作证明
2014/01/11 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
公司市场部岗位职责
2015/04/15 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python