js 右側浮動層（跟隨滾動）

原創

2020-02-22 18:27

因爲項目上有這樣的需求，在網上也查了些東西，之前是想找個差不多類似的套用一下。後來發覺沒有合適的，因時間緊迫就自己動手寫了一個簡單的，示例代碼如下兼容火狐和IE7+

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>無標題文檔</title>
    

    <script type="text/javascript">
        //<![CDATA[
        var tips; var theTop = 200/*這是默認高度,越大越往下*/; var old = theTop;
        function initFloatTips() {
            tips = document.getElementById('floatTips');
            moveTips();
        };
        function moveTips() {
            var tt = 50;
            if (window.innerHeight) {
                pos = window.pageYOffset
            }
            else if (document.documentElement && document.documentElement.scrollTop) {
                pos = document.documentElement.scrollTop
            }
            else if (document.body) {
                pos = document.body.scrollTop;
            }
            pos = pos - tips.offsetTop + theTop;
            pos = tips.offsetTop + pos / 10;
            if (pos < theTop) pos = theTop;
            if (pos != old) {
                tips.style.top = pos + "px";
                tt = 10;
            }
            old = pos;
            setTimeout(moveTips, tt);
        }

        //!]]>
    </script>

    <style type="text/css">
        .floatTips
        {
            position: absolute;
            border: solid 1px #777;
            padding: 3px;
            top: 250px;
            right: 5px;
            width: 30px;
            height: 300px;
            background: #cccccc;
            color: white;
        }
        .showDiv
        {
            position: absolute;
            border: solid 1px #777;
            padding: 3px;
            top: 250px;
            right: 5px;
            width: 300px;
            height: 300px;
            background: #cccccc;
            color: white;
        }
    </style>

    <script type="text/javascript">
        function FunOnmouseUp() {
            var objFloatTips = $("floatTips");
            var objActivityContext = $("activityContext");
            objFloatTips.className = "showDiv";
            objActivityContext.style.display = "";
        }
        function FunMouseOut() {
            var objFloatTips = $("floatTips");
            var objActivityContext = $("activityContext");
            objFloatTips.className = "floatTips";
            objActivityContext.style.display = "none";
        }

        function $(objID) {
            return document.getElementById(objID);
        }
    </script>

</head>
<body οnlοad="initFloatTips()">
    <div id="floatTips" οnmοuseοver="FunOnmouseUp()" οnmοuseοut="FunMouseOut()" class="floatTips">
        最新的活動
        <div id="activityContext" style="display: none">
            顯示最新的活動
        </div>
    </div>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7">
        <tr>
            <td height="2101">
            </td>
        </tr>
    </table>
</body>
</html>