溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
當我們瀏覽一些網頁時我們會發現頁面的的邊上會有廣告圖片，當滾動滾動條的時候這些廣告圖片會跟隨性的隨頁面一起運動（這里我叫它為廣告框）。一些網頁的廣告框是固定在瀏覽器上的用background：fixed；便可實現。這里我用JavaScript簡單的制作了一個隨滾動緩沖運動的廣告框。
制作的原理比較簡單，大家都有一個完美的js運動框架，這里的緩沖運動需要用到。這里的廣告框設定的是跟隨滾動條緩沖運動并運動到瀏覽器的中間位置。需要理解的是運動距離的計算和一些細節上的處理（一些BUG的預防）
這是我在這里使用的一個js運動框架，傳遞的參數只有一個并不是完美運動框架。傳遞的參數是廣告框的運動距離，因此我在運動框架內又獲取了一次對象。
var timer=null;
function startMover(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var ispeed=(iTarget-oDiv.offsetTop)/8;
//速度設置為逐漸減小
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
//避免速度產生小數點
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}
else{
oDiv.style.top=oDiv.offsetTop+ispeed+"px";
}
},30);
};
樣式和布局代碼
<style>
#div1{
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
//使用絕對定位讓其處于右上方
right: 0;
top: 0;
</style>
<body >
<div id="div1"></div>
</body>
js代碼
這里增加了.onscroll屬性目的是當滾動滾動條的時候也加載頁面,廣告框就能隨著滾動條一起運動了。還增加了.onresize屬性，由于我要實現廣告框一直是運動到瀏覽器的中間位置，然而當我改變瀏覽器高度的時候也要實現廣告框的運動，所以增加該屬性，當瀏覽器大小改變時加載。
<script>
window.onload=window.onscroll=window.onresize=function(){
var oDiv=document.getElementById('div1');
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
"scrolltop"是滾動條滾動的距離，這里有一個兼容chrome不支持document.documentElement.scrollTop獲取語句，其他瀏覽器支持。
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
"t"為讓廣告框處于中間位置的高度距離，（獲取瀏覽器的總高度-廣告框自身高度）/2
startMover(parseInt(t+scrolltop));
"parseIn"返回一個整數，避免小數生成。這里廣告框的總移動距離為（t+scrolltop）
};
var timer=null;
function startMover(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var ispeed=(iTarget-oDiv.offsetTop)/8;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}
else{
oDiv.style.top=oDiv.offsetTop+ispeed+"px";
}
},30);
};
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
