JQUERY广告图片自动收缩大小代码
今天给一个客户做一个效果,就是让首页刚打开的时候显示一张大的广告图,然后延时自动收缩成固定的小图;开始准备自己参考自己,手写一个JQUERY特效的,我很懒就从一个大网站上面扒了一个现成的,分享给有需要的站长们;请看说明,使用此特效需要加载JQUERY文件,可以调用谷歌的,也可以下载下来放到你网站里面,把一下代码复制到你需要显示广告特效的地方,根据里面注释修改宽度高度以及大图和小图的地址即可。
演示地址:https://lanye.org/demo/zidongshousuo/
//这是jquery脚本库文件必须使用,放在</head>前或者</body>前都可以 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> //这是特效内容代码,放到你需要显示的地方即可。 <script> function TopAd() {var strTopAd=""; //定义小图片内容 var topSmallBanner="<div><a href='http://baidu.com' target='_blank'><img src='xiaotu.jpg' width='960px' height='90px' /></a></div>"; //判断在那些页面上显示大图变小图效果,非这些地址只显示小图(或FLASH) if (location == "" || location == "" || location == "" || true) {//定义大图内容 strTopAd="<div id='adimage' style='width:960px;margin:0 auto;'><div id='adBig'><a href='http://baidu.com' target='_blank'><img src='datu.jpg' width='960px' height='500px' /></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();",3000); //alert(location); }); function showImage() { $("#adBig").slideUp(1000,function(){$("#adSmall").slideDown(1000);}); } </script>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶》。
- 本文网址:https://lanye.org/web/433.html
- 上篇文章:新模板制作完成
- 下篇文章:先用这个绿色透明板子凑活几天

玛丽隔壁2014-05-16 22:39回复
#4
不粗很酷,very cool!


李明2013-06-15 22:14回复
#3
很酷的特效代码。

无名智者2013-06-15 18:37回复
#2
js盲路过

蓝叶2013-06-15 22:21回复
@无名智者:谦虚了你

奇遇2013-06-13 13:35回复
#1
沙发