zoukankan      html  css  js  c++  java
  • jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码 V2.0

    把代码做成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();
    }
    转载请注明出处: 欢迎留言或qq(1090413588)交流
  • 相关阅读:
    ajax专题
    luogu P1346 电车 最短路
    luogu P1462 通往奥格瑞玛的道路 最短路
    luogu P1328 生活大爆炸版石头剪刀布
    luogu P1315 联合权值 枚举
    luogu P1156 垃圾陷阱 背包问题
    luogu P1217 回文质数 枚举
    luogu P3650 滑雪课程设计 枚举
    luogu1209 修理牛棚 贪心
    luogu P1223 排队接水 贪心
  • 原文地址:https://www.cnblogs.com/linyusong/p/6406627.html
Copyright © 2011-2022 走看看