很不错的一个广告效果，现在很多网站都在使用的，网页的顶部一个超大广告图片在网页打开时慢慢的由上直下的打开，等待几秒后，然后再慢慢的收缩回去，直到消失为止，边上还自带了关闭按钮，一点不影响玩网站的美观和原来的位置。
<!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广告收缩效果 站长学院 www.pigzz.com</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(http://www.pigzz.com/images/1.gif) 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="http://www.codefans.net/ajaxjs/jquery1.3.2.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>
分享到：
相关推荐
自定义Banner广告轮播图和自定义Indicator指示器
纯Flash横长型图片Banner广告代码 纯Flash横长型图片Banner广告代码
jquery定时自动切换banner广告图片动画插件示例.rar
Banner 光纤放大器产品手册pdf,Banner 光纤放大器产品手册
广告Banner条，支持自动滑动，手滑动，动态图片下载，点击回调，换页回调
jQuery 腾讯顶部弹窗banner
一般我们为了设计的美观，总是希望banner图能够根据下拉的大小来进行放大的一个效果
7屏大banner广告代码
该banner（自动滚动广告图）使用viewPager实现，可兼容在viewpager中显示
模仿淘宝等网站的顶部可关闭banner效果
android google横幅banner广告
各种banner图片自动切换，满足用户各种需求
XML配置的Flash顶部Banner幻灯焦点图
ios , tableview顶部banner上下拉伸缩,下拉,顶部banner跟着伸展
Android客户端图片左右滑动（自动滑动）
前面也介绍过几款广告插件，对于想要用博客赚钱的朋友来说，那些插件都是很实用的，今天有发现了一款不错的WordPress广告插件Max Banner Ads，一般情况下，如果要在WordPress博客上添加广告的话，这时，需要我们自己...
Android viewpager banner 广告 自动轮播 博客：http://blog.csdn.net/zhi0720/article/details/24350101
banner广告条 android自动滚动,手动拖动...
酷炫的Android banner广告轮播。
Banner 广告轮播不解释