今天给一个客户做一个效果,就是让首页刚打开的时候显示一张大的广告图,然后延时自动收缩成固定的小图;开始准备自己参考自己,手写一个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>
免责声明:
本页网址:点击复制分享给朋友吧!
本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!