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