快捷導航

javascript實現(xiàn)懸浮跟隨框緩動效果

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

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

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

1、定義一個運動函數(shù)，當觸發(fā)時調(diào)用，并且傳遞一個目標位置作為參數(shù)
2、運動函數(shù)內(nèi)部，調(diào)用定時函數(shù)，在定時函數(shù)內(nèi)部，先求出元素位置與目標位置的距離差，然后除以一個數(shù)值作為速度（由于距離差一直在縮小，所以速度值也一直在變小，從而達到緩動效果）
3、由于網(wǎng)頁上位置設(shè)置最小單位是1px，所以在步驟二中的運算可能會出現(xiàn)小數(shù)的情況，我們需要對小數(shù)進行處理，否則元素到達的位置總是和目標位置有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);//當speed為小于1的數(shù)時，將它變?yōu)?，從而使元素位置移動一個像素，因為小于1的像素會被近似為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>

運行結(jié)果圖：