首页 > 代码库 > jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V1.0
jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V1.0
html主题代码
<!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实现可展开收缩的首页大图广告展示方式</title><script type="text/javascript" src="js/jquery.js"></script><link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" /></head><body><div class="advbox"> <div class="dt_small" style="display:none;"> <div class="dt_toBig" style="display:none;"></div> <a href="#" target="_blank"><img src="images/1325.jpg" width="990" height="60" alt="广告图片缩略图" /></a> </div> <div class="dt_big"> <div class="dt_toSmall"></div> <a href="#" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="990" height="500" alt="广告图片大图" /></a> </div></div><script type="text/javascript">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) }}</script><script type="text/javascript">$(document).ready(function(){ AdvClick();});//顶部通览可展开收起效果if($("#actionimg").length>0){ $("#actionimg").onload=AdvAuto();}</script></body></html>
lanrenzhijia.css代码为：（注：加了这个css，关闭和重播会显示出来，不加则没有显示，没加的话图片没有居中，则要加 style="text-align: center;"，图片方能居中）@charset "utf-8";/* 代码整理：建站基地 */* { margin:0; padding:0; list-style-type:none;}a, img { border:0;}.advbox { width:990px; margin:0 auto;}.advbox .dt_small { width:990px;}.advbox .dt_big { width:990px;}.advbox .dt_toBig { position:absolute; left:50%; margin:5px 0px 0px 440px; width:49px; height:21px; background:url("../images/public_showTL_1201.png"); cursor:pointer;}.advbox .dt_toSmall { position:absolute; left:50%; margin:5px 0px 0px 440px; width:49px; height:21px; background:url("../images/public_closeTL_1201.png"); cursor:pointer;}
jquery.js下载：点击下载
转载于：建站基地_www.jz21.net http://www.jz21.net/JS/Advertising/22832.html
jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码js V1.0
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。