您的位置:首页 > Web前端 > HTML

鼠标划入一块区域高度增长弹出,划出时高度减小消失;

2016-12-07 14:29 295 查看
css部分:

把区域固定在右下角

        <style>

            .contact_suspension_frame {

                right: 0;

                z-index: 15;

                position: fixed;

                bottom: 0;

            }

            .suspension_frame_box {

                border: 1px solid #4da1e1;

                background: #fafafa;

                width: 175px;

                position: relative;

            }

            .suspension_frame_box h2 {

                height: 34px;

                line-height: 34px;

                padding: 0 3px;

                font-size: 14px;

                color: #fff;

                background: #3399FE;

                margin: 1px;

            }

            .suspension_frame_box h2 b {

                display: inline-block;

                width: 21px;

                height: 22px;

                vertical-align: middle;

                margin-top: 1px;

                background: url(images/icon/icon_sprites.png) no-repeat 0 -880px;

            }

            .suspension_frame_box h2 span {

                vertical-align: middle;

                display: inline-block;

                margin-top: -1px;

                height: 34px;

            }

            .suspension_frame_box table {

                margin: 0 0 20px 14px;

                text-align: left;

                width: 144px;

                font-size: 12px;

            }

            .suspension_frame_box table tr th {

                padding: 5px 0;

                color: #999;

                font-weight: normal;

            }

            .suspension_frame_box table tr td {

                color: #666;

            }

        </style>

HTML部分:

<div class="contact_suspension_frame">

            <div class="suspension_frame_box" id="suspensionFrame">

                <h2><b></b> <span>立即咨询价格和流程</span></h2>

                <div id="contactContent" class="contactContent" style="display: none; height: 0px; overflow: hidden;">

                    <table>

                        <tbody><tr>

                            <th valign="middle"><img src="resources/images/icon/suspension_frame_icon03_v2.jpg" alt="电话"></th>

                            <td>888-888-888</td>

                        </tr>

                        <tr>

                            <th valign="middle"><img src="resources/images/icon/suspension_frame_icon02_v2.jpg" alt="QQ"></th>

                            <td>88888888</td>

                        </tr>

                        <tr>

                            <th valign="middle"><img src="resources/images/icon/suspension_frame_icon01_v2.jpg" alt="微信"></th>

                            <td><img src="resources/images/two_dimensional_code.jpg" alt="二维码"></td>

                        </tr>

                        <tr>

                            <th></th>

                            <td>

                                <a target="_blank" href="javascript:;">

                                    <img src="http://wpa.qq.com/pa?p=2:800002255:41" alt="点击这里给我发消息" title="点击这里给我发消息">

                                </a>

                            </td>

                        </tr>

                    </tbody></table>

                </div>

            </div>

        </div>

js部分:

<script>

        $(".contact_suspension_frame").hover(function(){

            $("#contactContent").show();

            $("#contactContent").stop().animate({height:"195px"},"normal",function(){

                

            });

        },function(){

            $("#contactContent").stop().animate({height:"0px"},"normal",function () {

            $("#contactContent").hide();

            });

        });

    </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息