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

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

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

基于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 说:

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

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