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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
排序算法的理解算是程序員的基本功之一了，其功能是對一個數(shù)據(jù)元素集合或序列重新排列成一個按數(shù)據(jù)元素某個項值有序的序列。2011-02-02
reduce方法在數(shù)組的每個元素上執(zhí)行用戶提供的回調(diào)函數(shù),即"reducer",它傳入對前一個元素進行計算的返回值,結(jié)果是單個值,它是在數(shù)組的所有元素上運行reducer的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce常見實例方法的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了BOM系列第三篇之定時器應用(時鐘、倒計時、秒表和鬧鐘) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
canvas實現(xiàn)簡易的圓環(huán)進度條效果
本文主要分享了canvas實現(xiàn)簡易的圓環(huán)進度條效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了Javascript實現(xiàn)飛動廣告效果的方法,可實現(xiàn)廣告窗口的浮動顯示效果,且廣告窗口具有關(guān)閉功能,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了BootstrapValidator超詳細教程(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
Attribute是屬性的意思，文章僅對部分兼容IE和FF的Attribute相關(guān)的介紹。具體內(nèi)容詳情大家參考下本文2017-04-04
這篇文章主要介紹了js尾調(diào)用優(yōu)化的實現(xiàn)，尾調(diào)用（Tail Call）是函數(shù)式編程的一個重要概念，本文介紹它的含義和用法。感興趣的可以了解一下2019-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)換膚功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
javascript框架設(shè)計讀書筆記之字符串的擴展和修復
本文是司徒正美的《javascript框架設(shè)計》的第三章第一節(jié)的讀書筆記，簡單介紹了javascript字符串的擴展和修復，小伙伴們參考下吧2014-12-12