日期:2014-05-16  浏览次数:20485 次

一个问题,很困惑。
直接上代码

HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            *{margin:0; padding:0;}
            
            .ol-float *{margin:0; padding:0;font-size:12px;}
            .ol-float a {text-decoration:none;}
            .ol-float a:hover {text-decoration:none;}
            .ol-float {
                position:absolute; top:100px; right:1px;
                border:1px solid #F7A51A;
                border-top-width:2px;
                z-index:9999;
            }
            .ol-float-r {
                position:relative;
                width:0px; height:198px;
                overflow:hidden;
            }
            .ol-float-close {
                float:right;
                margin:5px 2px 0 0;
                padding:0 1px;
                border:1px solid #fff;;
                cursor:pointer; font-size:12px; color:#F7A51A; font-weight:bold;
            }
            .ol-float-close-hover {
                border:1px solid #F7A51A;
            }
            .ol-float-head {
                height:28px;
                background:#eee;
            }
            .ol-float-bottom {
                height:66px;
                background:#eee;
            }
            .ol-float-con {
                width:183px;
                overflow:hidden; zoom:1;
            }
            .ol-float-con a {
                float:left;
                width:88px; height:24px; line-height:24px;
                border:1px solid #fff;
                border-bottom-color:#f7f7f7;
                text-align:center; color:#000;    
            }
            .ol-float-con a span {
                margin-right:4px;
                color:#ffbb69;
            }
            .ol-float-con a:hover {
                color:red;
                border:1px solid #fed9ab;
                background:#fff9ec;
            }
            .ol-float-trigger {
                position:absolute; left:-28px; top:-19px;
                width:28px; height:103px;
                background:#ddd;
                cursor:pointer;
            }        
        </style>
    </head>
    <body>
        <div class="ol-float" id="ol-float">
            <div class="ol-float-trigger" id="ol-float-trigger">
                点<br/>击<br/>我
            </div>
            <div class="ol-float-r" id="ol-float-r">
                <div class="ol-float-head">
                    <div class="ol-float-close" title="关闭" id="ol-float-close">×</div>
                </div>
                <div class="ol-float-con">
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                    <a href="#"><span>回呼</span>咨询咨询</a>
                </div>
                <div class="ol-float-bottom"></div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $('#ol-float-trigger').cli