JS實(shí)現(xiàn)右側(cè)懸浮框效果
更新時(shí)間：2022年03月31日 10:28:18 作者：大橙子啊啊啊啊
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)右側(cè)懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)右側(cè)懸浮框效果的具體代碼，供大家參考，具體內(nèi)容如下
讓一個(gè)div始終懸浮在右下角
<!DOCTYPE html>
<html lang="en">
<head> ? ?
?? ?<meta charset="UTF-8"> ? ?
?? ?<title>Document</title>
?? ?<style> ? ?
?? ??? ?#div1{ ? ?
?? ??? ??? ? ?width: 100px; ? ? ? ?
?? ??? ??? ? ?height: 150px; ? ? ? ?
?? ??? ??? ? ?background: red; ? ? ? ?
?? ??? ??? ? ?position: absolute; ? ? ? ?
?? ??? ??? ? ?bottom: 0px; ? ? ? ?
?? ??? ??? ? ?right: 0px; ??
?? ??? ?}
?? ?</style>
?? ?<script> ? ?
?? ?window.onscroll = function(){ ? ? ? ?
?? ??? ?var oDiv = document.getElementById('div1'); ? ? ??
?? ??? ? var scrollTop =document.documentElement.scrollTop||document.body.scrollTop;//瀏覽器兼容 ? ? ? ?
?? ??? ? startmove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop)?
?? ??? ? // document.documentElement.clientHeight 頁(yè)面可視區(qū)高度 ??
?? ?} ? ? ? ? ? ?
?? ?var timer = null; ? ?
?? ?
?? ?//懸浮框緩沖運(yùn)動(dòng)
?? ?
?? ?function startmove(iTarget){ ? ? ? ?
?? ??? ?var oDiv = document.getElementById('div1'); ? ? ? ?
?? ??? ?clearInterval(timer); ? ? ??
?? ??? ?timer = setInterval(function(){ ? ? ? ? ? ? ? ? ? ? ? ?
?? ??? ??? ?var speed = (iTarget-oDiv.offsetTop)/4; ? ? ? ? ? ?
?? ??? ??? ?speed = speed>0?Math.ceil(speed):Math.floor(speed); ? ? ? ? ??
?? ??? ??? ? if(oDiv.offsetTop == iTarget){ ? ? ? ? ? ? ??
?? ??? ??? ? ?? ? clearInterval(timer); ? ? ? ? ?
?? ??? ??? ? }
?? ??? ? ? ? ? ? else{ ? ? ? ? ? ? ? ?
?? ??? ? ? ? ? ? ?? ?oDiv.style.top = oDiv.offsetTop +speed+'px'; ? ? ? ? ? ?
?? ??? ? ? ? ? ? }
? ? ? ? ? ? ? ? },30)
? ? ? ? ?} ? ? ? ? ? ? ? ? ? ? ? ??
? ? ?</script>
</head>
<body style="height:2000px"> ? ?
?? ?<div id="div1"></div>
</body>
</html>對(duì)聯(lián)懸浮
讓div懸浮在右側(cè)中間
只需要更改start move()函數(shù)中的數(shù)據(jù)
startmove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight )/2)+ scrollTop)//對(duì)聯(lián)懸浮
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)功能的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)的實(shí)例代碼，通過(guò)截圖加實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
代碼觸發(fā)js事件(click、change)示例應(yīng)用
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代，直接給一個(gè)兼容的Code，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以收藏下2013-12-12
JavaScript跳出循環(huán)的三種方法(break, return, continue)
這篇文章主要介紹了JavaScript跳出循環(huán)的三種方法(break, return, continue)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
uni-app?中清除定時(shí)器實(shí)現(xiàn)方法詳解
這篇文章主要為大家介紹了uni-app?中清除定時(shí)器實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
一文帶你簡(jiǎn)單封裝JS下的異步任務(wù)對(duì)象
我們?cè)跓倪^(guò)程中去干了別的事情,就屬于異步模式,異步模式中不會(huì)等待異步任務(wù)的結(jié)束才開(kāi)始執(zhí)行下一個(gè)同步的任務(wù),都是開(kāi)啟過(guò)后就立即執(zhí)行下一個(gè)任務(wù),下面這篇文章主要給大家介紹了如何通過(guò)一文帶你簡(jiǎn)單封裝JS下的異步任務(wù)對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-11-11
JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法
這篇文章介紹了JS獲取鼠標(biāo)坐標(biāo)的實(shí)例方法，有需要的朋友可以參考一下2013-07-07
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫(xiě)的
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫(xiě)的...2007-04-04
使用JavaScript實(shí)現(xiàn)頁(yè)面局部更新的方法總結(jié)
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一種用于在后臺(tái)與服務(wù)器進(jìn)行異步通信的技術(shù),本文給大家介紹了使用JavaScript實(shí)現(xiàn)頁(yè)面局部更新的三種方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
在頁(yè)面中輸出當(dāng)前客戶端時(shí)間javascript實(shí)例代碼
這篇文章主要介紹了在頁(yè)面中輸出當(dāng)前客戶端時(shí)間javascript實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript轉(zhuǎn)換數(shù)據(jù)庫(kù)DateTime字段類(lèi)型方法
下面小編就為大家?guī)?lái)一篇JavaScript轉(zhuǎn)換數(shù)據(jù)庫(kù)DateTime字段類(lèi)型方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06