把代码做成js网站进行统一调用

if (typeof jQuery == 'undefined') {
 document.writeln('<script type="text/javascript" src="../jquery.js"></script>'); }
else {
// jQuery 已加载
}

//泰山压顶主要js代码
document.writeln('<script type="text/javascript" src="../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="#" target="_blank"><img src="../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="#" target="_blank"><img id="actionimg" src="../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实现可展开收缩的首页大图广告展示方式 泰山压顶代码 V2.0的更多相关文章

  1. jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  2. jquery层居中,点击小图查看大图,弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  4. jQuery展开收缩2

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  5. jquery展开收缩列表

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  6. SlickGrid example 5:带子项的展开收缩

    带子项的展开收缩.   代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  7. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

  8. max-height实现任意高度元素的展开收缩动画

    http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...

  9. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

随机推荐

  1. mvc:annotation-driven' must have no character or element问题

    使用SpringMVC,启动tomcat报这个错误 解决办法 首先将Spring版本提升到3.1及以上 如果还不行替换xml文件头部: <?xml version="1.0" ...

  2. Unityclient通信測试问题处理(二)

    Unityclient通信測试问题处理(二) 在client的通信測试过程中.场景载入的问题给自己带来了不小的麻烦.由于消息的解析方法在单独的监听线程中调用,这也就意味着无法在消息的解析方法中调用Un ...

  3. 两个select级联操作实例(教师职称类型与职称)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. 对Jsp提交input标签空格和回车的处理

    今天做增加的时候发现一个问题,在js中去掉空格的时候如果这么写 var stage_name = document.getElementById("stage_name").val ...

  5. iOS开发之蓝牙通信

    一.引言 蓝牙是设备近距离通信的一种方便手段,在iPhone引入蓝牙4.0后,设备之间的通讯变得更加简单.相关的蓝牙操作由专门的 CoreBluetooth.framework进行统一管理.通过蓝牙进 ...

  6. phpmailer,smtp发送邮件实例(转)

    一,用phpmailer发送邮件 查看复制打印? <?php   include "class.phpmailer.php";    //包函邮件发送类      //邮件发 ...

  7. RHCA442学习笔记-Unit11内存缓存

      Unit 11 Memory Caches 内存缓存           学习目标:                 A. 使用内存来改善运行慢的子系统的服务时间.   11.1 Strategi ...

  8. redhat 6.4 双网卡绑定

    linux系统配置 1.redhat 6.4 双网卡绑定 1)#ethtool eth* //在服务器网口接网线至笔记本,确定各网口的配置文件: 2)切换目录 #cd /etc/sysconfig/n ...

  9. CentOS6.4安装ati显卡驱动

    台式机安装CentOS 6.4 x86_64位  集成显卡ati4290 CentOS的release notes上: The proprietary drivers for older AMD ( ...

  10. R-大数据分析挖掘(3-R作图)

    R语言绘图功能: 提供实例: demo(graphics)