首页 > 代码库 > jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V2.0
jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V2.0
把代码做成js网站进行统一调用
if (typeof jQuery == ‘undefined‘) { document.writeln(‘<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>‘); }else {// jQuery 已加载}//泰山压顶主要js代码document.writeln(‘<script type="text/javascript" src="http://www.mamicode.com/top.js"></script>‘);
top.js代码为:
document.writeln(‘<div class="advbox" style="text-align: center;">‘);document.writeln(‘<div class="dt_small" style="display:none;">‘);document.writeln(‘<div class="dt_toBig" style="display:none;"></div>‘);document.writeln(‘<a href="http://www.mamicode.com/#" target="_blank"><img src="http://www.mamicode.com/images/Small.jpg" width="984" height="130" alt="图片缩略图" /></a> </div>‘);document.writeln(‘<div class="dt_big">‘);document.writeln(‘<div class="dt_toSmall"></div>‘);document.writeln(‘<a href="http://www.mamicode.com/#" target="_blank"><img id="actionimg" src="http://www.mamicode.com/images/big.jpg" width="986" height="283" alt="图片大图" /></a> </div>‘);document.writeln(‘</div>‘);function AdvClick(){ var a=1500; var b=3*1000; $(".dt_toSmall").click(function(){ $(".dt_small").delay(a).slideDown(a); $(".dt_big").stop().slideUp(a); $(".dt_toSmall").stop().fadeOut(0); $(".dt_toBig").delay(a*2).fadeIn(0) });$ (".dt_toBig").click(function(){ $(".dt_big").delay(a).slideDown(a); $(".dt_small").stop().slideUp(a); $(".dt_toBig").stop().fadeOut(0); $(".dt_toSmall").delay(a*2).fadeIn(0) })}function AdvAuto(){ if($(".dt_big").length>0){ var a=1500; var b=3*1000; $(".dt_big").delay(b).slideUp(a,function(){ $(".dt_small").slideDown(a); $(".dt_toBig").delay(a).fadeIn(0) }); $(".dt_toSmall").delay(b).fadeOut(0) }}$(document).ready(function(){ AdvClick();});//顶部通览可展开收起效果if($("#actionimg").length>0){ $("#actionimg").onload=AdvAuto();}
jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V2.0
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。