大图展开收起功能

来源：互联网发布：mac上写日记的软件编辑：程序博客网时间：2024/05/23 23:32
大图展开收起功能
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style type="text/css">     *{margin:0; padding:0;}  li{list-style:none;}        .banner { position: relative; margin:0 auto; width:1210px; }        .ma_con { position: absolute; top: 355px; left: 580px; }        a.header-expand { text-decoration: none; display: block; padding: 4px 4px 4px 4px; top: 0; width: 90px; height: 30px; line-height: 30px; border-radius: 4px; background: rgba(0,0,0,0.6);                           border: 1px solid rgba(255,255,255,0.6); color: #fff; position: absolute; right:50px; font-size: 16px; font-family: Arial; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; border-top: 0px; }        .header_bg { width: 14px; height: 8px; display: inline-block; background:url(http://image.cbcie.com/webimg/index/v_arrow.png) 0px 0px no-repeat; margin-right: 4px; }        .header_bgh { width: 14px; height: 8px; display: inline-block; background:url(http://image.cbcie.com/webimg/index/v_arrow.png) -50px 0px no-repeat; margin-right: 4px; }        .bn_tit { position: absolute; top:0; left:20px; width: auto; height: 60px; line-height: 60px; display: none; }        .bn_tit h3 { float: left; font-family: Arial; color: #fff; font-size: 18px;margin-right:20px; }        .bn_tit h4 { float: left; color: #fff; font-size: 24px; }  </style><script src="http://c.csdnimg.cn/public/common/libs/jquery/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body>    <!--BANNER-->    <div class="banner">        <ul class="bxslider1">            <li class="slide"><a href="javascript:;" target="_blank" title="">                <img src="http://image.cbcie.com/webimg/index/database_banner1_1210_500.jpg" title="" alt="" /></a></li>        </ul>        <a href="#" class="header-expand"><b class="header_bg"></b> collapse</a>        <div class="bn_tit"><h3>多种数据 多样查询 尽在CBC数据库</h3><h4></h4></div>    </div>    <div id="" class="" style="width:100px; height:10000px;">    </div>  <script type="text/javascript">    //BANNER区域收起功能ydyl_sf    var exp_stat = true;    $(document).ready(function () {        $(window).scroll(function () {            if (exp_stat) {                $(".header-expand").find("b").removeClass("header_bg").addClass("header_bgh");                $(".bn_tit").show();                $(".banner").css("overflow", "hidden");                $(".banner").animate({                    height: "60px"                }, 300);                exp_stat = false;            }        });        $(".header-expand").click(function () {            if ($(".bn_tit").is(":hidden")) {                $(this).find("b").removeClass("header_bg").addClass("header_bgh");                $(".bn_tit").show();                $(".banner").css("overflow", "hidden");                $(".banner").animate({                    height: "60px"                }, 300, function () { exp_stat = false; });            }            else {                $(this).find("b").removeClass("header_bgh").addClass("header_bg");                $(".bn_tit").hide();                $(".banner").animate({                    height: "500px"                }, 300, function () { exp_stat = true; });            }        });    });</script> </body></html>
0 0