JS實現(xiàn)側(cè)懸浮浮動實例代碼
效果:
思路:
首先,加載onscroll控制滾動條。然后寫緩存運動的方法,緩沖運動的方法是先計算出DIV緩沖的速度,并且將其取整,再進(jìn)行運動判斷什么時候到達(dá)終點。最后將其參數(shù)返回。再在onscroll里面調(diào)用此方法,并且將終點計算出來賦予此方法的參數(shù)。
代碼:
<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+移動高度
};
var timer = null;
function move(end) {
clearInterval(timer); //首先,先關(guān)閉之前如果有開啟的setInterval;
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //計算DIV要走的速度,DIV要走的速度就等于(終點-offsetTop高度)/縮放系數(shù)
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //為了避免小數(shù),將其取整
if (oDiv.offsetTop == end) { //當(dāng)DIV到達(dá)終點,則關(guān)閉setInterval;
clearInterval(timer);
}
else {
oDiv.style.top = oDiv.offsetTop + speed + 'px'; //移動div
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>
相關(guān)文章
JavaScript實現(xiàn)給按鈕加上雙重動作的方法
這篇文章主要介紹了JavaScript實現(xiàn)給按鈕加上雙重動作的方法,可實現(xiàn)文本框元素值添加及頁面跳轉(zhuǎn)的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08javascript中動態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動態(tài)加載js文件多種解決辦法,有需要的朋友可以參考一下2013-11-11讓iframe子窗體取父窗體地址欄參數(shù)(querystring)
突然用到,記錄一下,對地址欄字符串用正則處理最好,有時間研究一下。 主要是思路。2009-10-10發(fā)個自己寫的表格操作類(添加,刪除,排序,上移,下移)
發(fā)個自己寫的表格操作類(添加,刪除,排序,上移,下移)...2006-11-11