jquery实现的Banner广告收缩效果代码
更新时间：2015年09月02日 15:16:41 作者：企鹅
这篇文章主要介绍了jquery实现的Banner广告收缩效果代码,可实现点击按钮收缩与展开广告图片的功能,非常简单实用,需要的朋友可以参考下
本文实例讲述了jquery实现的Banner广告收缩效果代码。分享给大家供大家参考。具体如下：
这里演示一个Banner广告收缩效果，点开后，网页显示大广告，用鼠标点击“关闭”后，广告会收缩上去，此效果已在各大网站见到过，欢迎借鉴使用。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-banner-show-close-style-codes/
具体代码如下：
<!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程序设计有所帮助。
相关文章
这篇文章主要介绍了jquery实现导航固定顶部的效果，仿蘑菇街的，感觉还不错，下面将实例与大家分享下2014-10-10
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件2012-02-02
本篇文章给大家总结了关于jQuery代码优化方法，如果你这方面有需求，跟着小编一起学习下吧。2018-01-01
本文主要介绍了jquery中bind(),live(),delegate(),on()绑定事件的不同点和相同点，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇Spring MVC中Ajax实现二级联动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
Jquery 滑入滑出效果实现代码，需要的朋友可以参考下。2010-03-03
本篇文章主要介绍了jQuery实用密码强度检测，这是一个非常常见的功能，可以验证密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2017-03-03
这篇文章主要介绍了jquery插件实现堆叠式菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家分享了适应手机端的jQuery图片滑块动画,不仅在PC浏览器上可以使用，而且更适合在手机端的网页中使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了基于JQuery和DWR实现异步数据传递,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论