欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼

 更新時(shí)間：2013年11月29日 16:40:53   作者：  
這篇文章主要介紹了JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼，有需要的朋友可以參考一下

效果：

思路：

首先，加載onscroll控制滾動(dòng)條。然后寫(xiě)緩存運(yùn)動(dòng)的方法，緩沖運(yùn)動(dòng)的方法是先計(jì)算出DIV緩沖的速度，并且將其取整，再進(jìn)行運(yùn)動(dòng)判斷什么時(shí)候到達(dá)終點(diǎn)。最后將其參數(shù)返回。再在onscroll里面調(diào)用此方法，并且將終點(diǎn)計(jì)算出來(lái)賦予此方法的參數(shù)。

代碼：

復(fù)制代碼 代碼如下:

<head runat="server">
    <title></title>
    <style type="text/css">
        #div1
        {
            width: 200px;
            height: 200px;
            background: #0000FF;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script type="text/javascript">
        window.onscroll = function () {
            var oDiv = document.getElementById('div1');
            var DivScroll = document.documentElement.scrollTop || document.body.scrollTop;      //獲取移動(dòng)高度
            //                        oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
            move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll));    //調(diào)用傳參，其中里面的參數(shù)是DIV要走的終點(diǎn)。也就是（可視高度-DIV高度）/2+移動(dòng)高度
        };

        var timer = null;
        function move(end) {
            clearInterval(timer);       //首先，先關(guān)閉之前如果有開(kāi)啟的setInterval;
            timer = setInterval(function () {      
                var oDiv = document.getElementById('div1');
                var speed = (end - oDiv.offsetTop) / 5;     //計(jì)算DIV要走的速度，DIV要走的速度就等于（終點(diǎn)-offsetTop高度）/縮放系數(shù)
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);       //為了避免小數(shù)，將其取整
                if (oDiv.offsetTop == end) {        //當(dāng)DIV到達(dá)終點(diǎn)，則關(guān)閉setInterval;
                    clearInterval(timer);
                }
                else {
                    oDiv.style.top = oDiv.offsetTop + speed + 'px';     //移動(dòng)div
                }
            }, 30);
        }
    </script>
</head>
<body style="height: 1000px;">
    <div id="div1">
    </div>
</body>

相關(guān)文章

最新評(píng)論