首頁 > 開發者 > JavaScript
效果：
思路：
首先，載入onscroll控制捲軸。然後寫緩衝運動的方法，緩衝運動的方法是先計算出DIV緩衝的速度，並且將其取整，再進行運動判斷什麼時候到達終點。最後將其參數返回。再在onscroll裡面調用此方法，並且將終點計算出來賦予此方法的參數。
代碼：
複製代碼 代碼如下:
<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)); //調用傳參，其中裡面的參數是DIV要走的終點。也就是（可視高度-DIV高度）/2+移動高度
};
var timer = null;
function move(end) {
clearInterval(timer); //首先，先關閉之前如果有開啟的setInterval;
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //計算DIV要走的速度，DIV要走的速度就等於（終點-offsetTop高度）/縮放係數
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //為了避免小數，將其取整
if (oDiv.offsetTop == end) { //當DIV到達終點，則關閉setInterval;
clearInterval(timer);
}
else {
oDiv.style.top = oDiv.offsetTop + speed + 'px'; //移動div
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
