把代码做成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. Yii2 TimestampBehavior行为

    <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * ...

  2. RH442之Tuned优化方案

    系统优化 介绍: Tuned是监控并收集系统组件使用资源的守护进程,可根据收集信息动态调整系统,可调整CPU和网络资源的使用来提高活跃设备性能与不活跃设备电能消耗.通过tuned-adm中提供优化案例 ...

  3. 学习笔记:暴力破解WIFI小软件

    小弟 自己的学习笔记,做练习的 ,缺陷还很多,做到无法解决速度问题就不想做下去了,如果要看的话 主要是思路问题,获取句柄,控制句柄而已,代码比较简单.大神勿喷啊 破解DEMO源码:http://dow ...

  4. Mysql性能优化之缓存参数优化

    数据库属于 IO 密集型的应用程序,其主要职责就是数据的管理及存储工作.而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所以,要优化 ...

  5. javascript默认中文(汉字/标点)长度均为1的解决

    javascript默认中文(汉字/标点)长度均为1 与后台(java)不一致, function calculate(str) { //var str="你好,哈哈哈000111lll&q ...

  6. cocos2d-x jsb 防止触摸事件传递

    在游戏中要实现消息弹窗,让用户点击确认,其他区域产生遮罩,阻挡下层的事件被点击到,这是个很常用的功能,在cocos2d-x中,可以通过为layer添加事件代理来实现: pDirector->ge ...

  7. System Address Map Initialization in x86/x64 Architecture Part 2: PCI Express-Based Systems

      原文  http://resources.infosecinstitute.com/system-address-map-initialization-x86x64-architecture-pa ...

  8. cocos2d-x 开发中的小问题 在xcode4环境下

    转自:http://hi.baidu.com/baby_66_/item/302353174f19521cd0d66df2 1.如果你在想怎么去搞定程序的开始运行的背景一闪而过的大图 以及icon想换 ...

  9. [转]BeagleBone Black USB一线通(2)

    接上篇  BeagleBone Black USB 一线通(1) 三.网络与ssh终端 通过串口终端我们可以看到启动的过程,也能做一些交互操作,比如我们看到了网络接口的状况.其中的usb0已经在随板的 ...

  10. UIPickerView(选择器)

    UIPickerView也是一个选择器控件,它比UIDatePicker更加通用,它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活. UIPicke ...