上下拉幕横幅广告效果-基于jQuery

当前位置: 时代前端首页 > jQuery > 文章详细内容

发表时间：2010-07-22关注度：1,097 views 评论数：1

基于jQuery实现，伸缩前，广告图片尺寸：980x400；伸缩后，广告图片尺寸：980x80。替换对应图片即可！ [runcode height="300"] 基于jQuery的拉幕横幅广告效果 - 时代前端52shidai.com img{border:0} // JScript 文件 function TopAd() { var strTopAd=""; //定义小图片内容 var topSmallBanner=""; //判断在那...

基于jQuery实现，伸缩前，广告图片尺寸：980×400；伸缩后，广告图片尺寸：980×80。替换对应图片即可！

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基于jQuery的拉幕横幅广告效果 - 时代前端52shidai.com</title> <meta name="Copyright" content="JavaScript分享网 http://www.52shidai.com/" /> <meta name="description" content="基于jQuery的拉幕横幅广告效果,JavaScript分享网" /> <meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" /> <style type="text/css"> img{border:0} </style> <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type=text/javascript></SCRIPT> </head> <body style="text-align:center"> <SCRIPT language=javascript type=text/javascript > // JScript 文件 function TopAd() { var strTopAd=""; //定义小图片内容 var topSmallBanner="<div><a href=\"http://www.52shidai.com/\" target=_blank><img src=\"http://www.sharejs.com/code/gg/lamu/images/top_090901_s.gif\" /></a></div>"; //判断在那些页面上显示大图变小图效果，非这些地址只显示小图（或FLASH） if (location == "http://www.52shidai.com" || location == "http://52shidai.com" || true) { //定义大图内容 strTopAd="<div id=adimage style=\"width:980px\">"+ "<div id=adBig><a href=\"http://www.52shidai.com/\" " + "target=_blank><img title=2010年平湖在线首届家居建材团购会 "+ "src=\"http://www.sharejs.com/code/gg/lamu/images/top_sharejs_b.jpg\" " + "border=0></A></div>"+ "<div id=adSmall style=\"display: none\">"; //strTopAd+= topFlash; strTopAd+= topSmallBanner; strTopAd+= "</div></div>"; } else { //strTopAd+=topFlash; strTopAd+= topSmallBanner; } strTopAd+="<div style=\"height:7px; clear:both;overflow:hidden\"></div>"; return strTopAd; } document.write(TopAd()); $(function(){ //过两秒显示 showImage(); 内容 setTimeout("showImage();",2000); //alert(location); }); function showImage() { $("#adBig").slideUp(1000,function(){$("#adSmall").slideDown(1000);}); } </SCRIPT> <br><br> <div align="center"> <br> 无效果请刷新即可看到效果！ <br> 获取更多JavaScript代码，请登录<strong>时代前端</strong> <a href="http://www.52shidai.com">http://www.52shidai.com</a> <br> 转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！ </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明文章转载自：网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址：上下拉幕横幅广告效果-基于jQuery

标签：广告效果, 拉幕, 横幅

上一篇: javascript 实现45种缓动效果

下一篇:不规则的Tab标签切换-JavaScript

随机日志推荐

才1个评论

1楼
七月 26th, 2010 at 10:00 上午 nike air max 90 说:

尽管很难，但还是想努力的学

发表评论

最热文章
- 前端开发的一些必备工具信息 - 8,920 views
- 100个最漂亮|免费的wordpress模板 - 4,867 views
- wordpress采集插件—wp-o-matic使用详解 - 3,024 views
- 漂亮的javascript对话框(弹出层)组件[附源码] - 2,736 views
- 12个用jQuery插件改变Button按钮的漂亮特效 - 2,705 views
- 开启wordpress 3.0多用户的方法 - 2,306 views
- jQuery-bind不能处理绑定hover事件 - 2,103 views
- 国人原创的WordPress杂志主题wp-cms - 2,054 views
- 封装好的javascript图片滑动效果 - 2,004 views
- 推荐5个漂亮的jquery主流图表插件 - 1,909 views
最新文章
热门标签

canvas google html HTML5 JavaScript jQuery SEO wordpress 主题优化关键字关键词兼容函数前端优化博客友情链接图片外链工具常用性能技巧排名推广插件搜索搜索引擎收录教程文章方法权重模板滚动漂亮特性百度经典网站菜单谷歌遍历链接鼠标滚轮

网站前端,web前端,前端脚本,前端优化|时代前端