快捷導(dǎo)航

javascript實(shí)現(xiàn)懸浮跟隨框緩動(dòng)效果

更新時(shí)間：2022年03月31日 14:07:22 作者：青天訣

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)懸浮跟隨框緩動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

懸浮跟隨框是我們在網(wǎng)頁中經(jīng)常見到的效果，我們還是使用上一實(shí)例中的運(yùn)動(dòng)框架去實(shí)現(xiàn)。

1、定義一個(gè)運(yùn)動(dòng)函數(shù)，當(dāng)觸發(fā)時(shí)調(diào)用，并且傳遞一個(gè)目標(biāo)位置作為參數(shù)
2、運(yùn)動(dòng)函數(shù)內(nèi)部，調(diào)用定時(shí)函數(shù)，在定時(shí)函數(shù)內(nèi)部，先求出元素位置與目標(biāo)位置的距離差，然后除以一個(gè)數(shù)值作為速度（由于距離差一直在縮小，所以速度值也一直在變小，從而達(dá)到緩動(dòng)效果）
3、由于網(wǎng)頁上位置設(shè)置最小單位是1px，所以在步驟二中的運(yùn)算可能會(huì)出現(xiàn)小數(shù)的情況，我們需要對小數(shù)進(jìn)行處理，否則元素到達(dá)的位置總是和目標(biāo)位置有1px的差距。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
?? ?<head>
?? ??? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
?? ??? ?<title>New Web Project</title>
?? ??? ?<style>
?? ??? ??? ?#div1{
?? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ?height:150px;
?? ??? ??? ??? ?background: red;
?? ??? ??? ??? ?border:1px solid #008000;
?? ??? ??? ??? ?right:0px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ?}
?? ??? ??? ?#div2{
?? ??? ??? ??? ?width:1920px;
?? ??? ??? ??? ?height:1px;
?? ??? ??? ??? ?background:red;
?? ??? ??? ??? ?
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?</style>
?? ??? ?<script>
?? ??? ??? ?window.οnlοad=function(){
?? ??? ??? ??? ?var oDiv=document.getElementById('div1');
?? ??? ??? ??? ?var oDiv1=document.getElementById('div2');
?? ??? ??? ??? ?var timer=null;
?? ??? ??? ??? ?oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+document.documentElement.scrollTop+'px';
?? ??? ??? ??? ?window.οnscrοll=function(){
?? ??? ??? ??? ??? ?var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
?? ??? ??? ??? ??? ?var iTarget=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrolltop;
?? ??? ??? ??? ??? ?iTarget=Math.floor(iTarget);
?? ??? ??? ??? ??? ?oDiv1.style.top=iTarget+'px';
?? ??? ??? ??? ??? ?startMove(iTarget);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?};
?? ??? ??? ??? ?function startMove(itarget){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ??? ?timer=setInterval(function(){
?? ??? ??? ??? ??? ??? ?var iDis=itarget-oDiv.offsetTop;
?? ??? ??? ??? ??? ??? ?var speed=iDis/5;
?? ??? ??? ??? ??? ??? ?if(iDis>=0){
?? ??? ??? ??? ??? ??? ??? ?speed=Math.ceil(speed);//當(dāng)speed為小于1的數(shù)時(shí)，將它變?yōu)?，從而使元素位置移動(dòng)一個(gè)像素，因?yàn)樾∮?的像素會(huì)被近似為0
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ??? ??? ?speed=Math.floor(speed);
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?if(oDiv.offsetTop==itarget)
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?else
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ?oDiv.style.top=oDiv.offsetTop+speed+'px';
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?document.title=oDiv.offsetTop;
?? ??? ??? ??? ??? ?},30);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?};
?? ??? ?</script>
?? ?</head>
?? ?<body style="height:2000px;">
?? ??? ?<div id="div1">
?? ??? ??? ?
?? ??? ?</div>
?? ??? ?
?? ?</body>
</html>

運(yùn)行結(jié)果圖：