運動——對聯懸浮框


代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div {
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
// window.onscroll 滾動頁面時觸發
window.onscroll=function() {
var oDiv = document.getElementById("div");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//一般只用前者
startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop));
//clientHeight:內容可視區域的高度,其中變量主要表示高度在頁面瀏覽器所能看到的區域中央
};
var timer=null;//timer一定要放在函數外,clearInterval(timer)才能起作用

function startMove(iTarget){
var oDiv = document.getElementById("div");

clearInterval(timer);//保證函數中永遠只有一個定時器,防止效果疊加,比如運動不斷加速或透明度不斷加大
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/4;//4 只是用來設置速度快慢,可以自定義(越大速度越慢)
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//Math.ceil():向上取整;Math.floor()向下取整;取整speed是為了防止speed和iTarget有誤差而導致窗口在懸浮位置抖動
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}else{
document.title=iTarget;//獲取當前目標的值
document.getElementById("txt").value=oDiv.offsetTop;
oDiv.style.top=oDiv.offsetTop+speed+'px';

}
},30);



}
</script>
</head>

<body style="height:2000px;">
<input type="text" id="txt" style="position:fixed; right:0; top:0;"/>

<div id="div"></div>
</body>
</
html>
運行結果:
  初始界面:
      
 
  不斷滑動頁面滾動條之后界面:
          





注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com