用jQuery怎样写个简单的Banner广告收缩效果-群英

您现在的位置是：群英 > 开发技术 > web开发

用jQuery怎样写个简单的Banner广告收缩效果

Admin发表于 2022-08-23 17:07:12188 次浏览

这篇文章主要为大家详细介绍了用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怎样写个简单的Banner广告收缩效果”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： Banner广告收缩效果

上一篇：用jQuery如何制作自动轮播图，且鼠标经过停止轮播

下一篇： jQuery中Mobile窗体长内容显示问题如何优化

推荐内容

PHP中替换第一位字符的方法和代码是什么
2022-12-14 11:21:38

Python使用中有哪些高效、实用的高级技巧
2022-08-19 17:53:01

新手学习Python有哪些关键字要掌握
2022-08-19 17:51:59

热门关键词

Banner广告收缩效果 c语言变量与常量 oracle 字符编码 .h文件与.c文件数据库增加数据 php调用类中的方法 Module深模块修改表结构 mysql的explain python读取目录文件 thinkphp登录注册 vue组件怎么传值 JavaScript内置对象math mysql配置环境左外连接 js 模块化 es6数组 jquery无缝滚动网站内部链接优化 Spring半注解和全注解 js,计算器 python字符串逆序 Go语言面向对象 mysql增加字段 php修改时区 group by用法 html input隐藏标签 mysql价格类型 PHP编程

热门信息

Python怎么样创建txt文件，写入方法是什么？
2022-01-24 19:23:44

pycharm怎么完全卸载？两个步骤帮你搞定
2022-01-04 18:53:44

Java中map判断是否存在key怎样做？教你两个方法
2022-01-26 18:39:38

Python中如何求阶乘？教你四个方法
2022-02-25 17:19:26

Python中怎样利用while求1到100的和？
2021-11-20 17:46:01

Java中string转date有哪些方式，怎样实现？
2022-01-18 18:00:09

用python如何读取csv文件，你知道几种方法？
2021-11-22 17:53:55

Python中怎么定义数组？教你三种方法
2022-01-13 18:58:11

laravel下怎样设置、获取和删除缓存，方法是什么？
2021-11-29 17:58:44

python中怎样统计元素出现的次数，方法有哪些？
2021-11-20 17:45:40