wuruize888
2018-01-14 03:09
采纳率: 88.2%
浏览 1.0k

css3的问题,谢谢解答。

 <html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            body{
                background: #ecedf0;
                margin: 0;
                padding: 0;
                font-size: 12px;
                width:100%;
                height:100%;
            }

            .main{
                width:100%;
                height:300px;
                float:left;
                margin: 0;
                padding: 0;
                min-width: 800px;
                background: #005ba6;
                display:inline-block;
            }

                        .top{
                            height:60px;
                            width:100%;
                            float:left;
                            background: red;
                        }
            .mleft{
                width:180px;
                height:100%;
                background: #191919;
                float: left;

/*                transition: left 0.3s;*/
            }
            .mleft:hover{
                left:-300px;
            }
            .mmiddle{
                width:20px;
                float: left;
                height:100%;
                background: red;
            }
            .mright{
                margin-left: 200px;
                height:100%;
                float:left;
                background: #008200;
            }
        </style>
    </head>
    <body>

        <div class='main'>
                        <div class='top'></div>
            <div class='bottom'>
                            <div class='mleft'></div>
                            <div class="mmiddle">点我隐藏mleft区域</div>
                            <div class="mright">如果mleft隐藏,此区域保持width:100%</div>
                        </div>
        </div>
    </body>
</html>

实现以下几点:
1.bottom区域以屏幕为中心占比100%高度;
2.点击mmiddle区域隐藏mleft区域,希望以css3的动画过渡效果实现。同时mright占比宽度100%;
3.再次点击mmiddle区域显示mleft区域,同时希望以css3的动画过渡效果实现。

谢谢各位帮忙

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳
     <!DOCTYPE html>
    <html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
          html,  body {
                background: #ecedf0;
                margin: 0;
                padding: 0;
                font-size: 12px;
                width: 100%;
                height: 100%;
            }
    
            .main {
                width: 100%;
                height: 300px;
                float: left;
                margin: 0;
                padding: 0;
                min-width: 800px;
                background: #005ba6;
                display: inline-block;height:100%
            }
    
            .top {
                height: 60px;
                width: 100%;
                background: red;
            }
            .bottom{position:absolute;top:60px;bottom:0;width:100%}
            .cubic{-moz-transition:all 0.6s cubic-bezier(0.23,1,0.32,1);-webkit-transition:all 0.6s cubic-bezier(0.23,1,0.32,1);transition:all 0.6s cubic-bezier(0.23,1,0.32,1);}
            .mleft {
                width: 180px;
                height: 100%;
                background: #191919;
               position:absolute;left:0;top:0
            }
    
            .mmiddle {
                width: 20px;
                position:absolute;
                height: 100%;
                background: red;
               position:absolute;left:180px;top:0
            }
    
            .mright {
                margin-left: 200px;
                height: 100%;
                background: #008200;
            }
        </style>
    </head>
    <body>
    <div class='main'>
            <div class='top'></div>
            <div class='bottom'>
                <div class='mleft cubic'></div>
                <div class="mmiddle cubic">点我隐藏mleft区域</div>
                <div class="mright cubic">如果mleft隐藏,此区域保持width:100%</div>
    
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $('.mmiddle').click(function () {
            var toHide = $(this).data('toHide');
            $(this).data('toHide', !toHide);
            $('.mleft').css('width', toHide ? 0 : 180)
            $('.mmiddle').css('left', toHide ? 0 : 180)
            $('.mright').css('margin-left', toHide ? 0 : 20)
        }).data('toHide',true);
    </script>
    
    点赞 打赏 评论

相关推荐 更多相似问题