大图展开收起功能

最新推荐文章于 2023-06-13 16:20:25 发布

ke0971

最新推荐文章于 2023-06-13 16:20:25 发布

阅读量466

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/ke0971/article/details/56666748

版权

HTML 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

大图展开收起功能

<!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>

ke0971

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大图展开收起功能

大图展开收起功能<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta nam
复制链接

扫一扫

专栏目录