用jQuery怎样写个简单的Banner广告收缩效果
导读：这篇文章主要为大家详细介绍了用jQuery怎样写个简单的Banner广告收缩效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助。 这里演示一个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怎样写个简单的Banner广告收缩效果”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用jQuery怎样写个简单的Banner广告收缩效果
本文地址： https://pptw.com/jishu/653717.html