设为首页
|
加入收藏
您好,欢迎来到点滴吧!
手机版
www.diandiba.com
记录点点滴滴,尽在点滴吧
文章
文章
特效
素材
景点
首页
手机
建站
源码
服务器
生活
常识
健康
美食
美容
旅游
景点
攻略
游记
特产
知识
笑话
名句
散文
故事
编程
ASP
PHP
.NET
SQL
软件
Office
QQ
Photoshop
特效
幻灯片
图片相册
播放器
素材
图片
PSD素材
网页模板
您现在的位置:
首页
>
其它特效
> 特效详情
一个Banner广告收缩效果
更新时间:2016/1/6 17:47:34 下载:7189次
<!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(http://www.diandiba.com/Upload/20160106175134225.jpg) 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.diandiba.com/Upload/jquery-1.8.3.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广告收缩效果,点开后,网页显示大广告,用鼠标点击“关闭”后,广告会收缩上去,此效果已在各大网站见到过,欢迎借鉴试用。
上一个素材:
没有了
下一个素材:
四代新版旅游网站基本信息调用
相关特效
一个Banner广告收缩效果
JS Cookies用法示例:记事
可翻阅上一条、下一条文字
jQuery+HTML5微信大转盘抽
导航分类
热门文章
1
一个Banner广告收缩效果
2
Zepto.js宝箱开启动画抽奖
3
可翻阅上一条、下一条文字切换
4
JS Cookies用法示例:记事贴
5
jQuery+HTML5微信大转盘抽奖代
6
微信客户端抽奖转盘效果
7
四代新版旅游网站基本信息调用
8
jquery地图展示全国网点特效代
9
兼容IE\FF的加入收藏夹和设为
10
SiteWeaver数据库结构表
关于我们
|
联系我们
|
免责声明
|
网站地图
|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2