JS實現(xiàn)側(cè)懸浮浮動實例代碼

2019-11-20 21:33:19

字體：大中小

供稿：網(wǎng)友

效果：

思路：

首先，加載onscroll控制滾動條。然后寫緩存運動的方法，緩沖運動的方法是先計算出DIV緩沖的速度，并且將其取整，再進(jìn)行運動判斷什么時候到達(dá)終點。最后將其參數(shù)返回。再在onscroll里面調(diào)用此方法，并且將終點計算出來賦予此方法的參數(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;      //獲取移動高度
            //                        oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
            move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll));    //調(diào)用傳參，其中里面的參數(shù)是DIV要走的終點。也就是（可視高度-DIV高度）/2+移動高度
        };