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