JS實(shí)現(xiàn)側(cè)懸浮浮動實(shí)例代碼
效果：
思路：
首先，加載onscroll控制滾動條。然后寫緩存運(yùn)動的方法，緩沖運(yùn)動的方法是先計(jì)算出DIV緩沖的速度，并且將其取整，再進(jìn)行運(yùn)動判斷什么時候到達(dá)終點(diǎn)。最后將其參數(shù)返回。再在onscroll里面調(diào)用此方法，并且將終點(diǎn)計(jì)算出來賦予此方法的參數(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要走的終點(diǎn)。也就是（可視高度-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; //計(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'; //移動div
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>
- JS實(shí)現(xiàn)懸浮移動窗口(懸浮廣告)的特效
- JavaScript 懸浮窗口實(shí)現(xiàn)代碼
- JS控制彈出懸浮窗口(一覽畫面)的實(shí)例代碼
- JS實(shí)現(xiàn)自動固定頂部的懸浮菜單欄效果
- javascript 鼠標(biāo)懸浮圖片顯示原圖 移出鼠標(biāo)后原圖消失（多圖）
- js 固定懸浮效果實(shí)現(xiàn)思路代碼
- js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
- js 左右懸浮對聯(lián)廣告特效代碼
- js制作的鼠標(biāo)懸浮時產(chǎn)生的下拉框效果
- javaScript實(shí)現(xiàn)鼠標(biāo)在文字上懸浮時彈出懸浮層效果
相關(guān)文章
這篇文章主要介紹了JavaScript引用類型Array,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript數(shù)組相關(guān)的創(chuàng)建、檢測、轉(zhuǎn)換、排序、棧、隊(duì)列、引用等各種常見操作技巧,需要的朋友可以參考下2018-07-07
JavaScript實(shí)現(xiàn)給按鈕加上雙重動作的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)給按鈕加上雙重動作的方法,可實(shí)現(xiàn)文本框元素值添加及頁面跳轉(zhuǎn)的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
javascript中動態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動態(tài)加載js文件多種解決辦法，有需要的朋友可以參考一下2013-11-11
讓iframe子窗體取父窗體地址欄參數(shù)(querystring)
突然用到，記錄一下，對地址欄字符串用正則處理最好，有時間研究一下。 主要是思路。2009-10-10
低代碼從0到1創(chuàng)建小程序項(xiàng)目詳解流程
低代碼作為開發(fā)工具類的產(chǎn)品，需要有從0到1體系化的教程才可以，而且還得有教師進(jìn)行輔助。否則，學(xué)習(xí)低代碼是有難度的，入門很難。因?yàn)榇蠹伊?xí)慣了用代碼編程，一下子過度到可視化編程，有一個思路上的轉(zhuǎn)變2022-08-08
js中的雙感嘆號判斷。在網(wǎng)上查了些資料，他相當(dāng)于三元運(yùn)算符，返回boolean值2013-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)通訊錄列表展開收起，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JavaScript中常見的事件用法小結(jié),需要的朋友可以參考下2023-05-05
發(fā)個自己寫的表格操作類(添加，刪除，排序，上移，下移)
發(fā)個自己寫的表格操作類(添加，刪除，排序，上移，下移)...2006-11-11
微信網(wǎng)頁登錄邏輯與實(shí)現(xiàn)方法
這篇文章主要介紹了微信網(wǎng)頁登錄邏輯與實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04