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

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

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

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

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

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

这篇文章主要为大家详细介绍了用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窗体长内容显示问题如何优化

相关信息推荐

python中remove函数是如何使用的呢？

2022-07-22 17:32:49　

摘要：python中remove函数用于移除列表中某个值的第一个匹配项，该函数没有返回值但是会移除列表中的某个值的第一个匹配项，语法是【list.remove(obj) 】，参数obj表示为列表中要移除的对象。

PHP怎样提升脚本性能？教你几种技巧

2021-10-29 18:00:25　

摘要：这篇文章给大家分享的是提升PHP脚本性能的技巧，PHP作为现在比较流行的脚本语言之一，有很多公司都在在使用这种语言进行网站开发。而提升PHP脚本性能也是PHP开发中很重要的部分，对此本文就给大家来分享几个提升PHP脚本性能的技巧，但是要知道你的PHP脚本性能，很多时候依赖于你的php版本、你的web server环境和你的代码的复杂度。

laravel中的repository模式使用方法是什么？

2022-09-20 18:05:38　

摘要：这篇文章主要介绍了laravel repository模式使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下