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