側邊橫幅動畫效果
阿新 • • 發佈：2018-09-18
jpg var utf 而是 增強 函數 希望 永遠 20px
我們在寫頁面的時候，常見的側邊橫幅廣告是通過position：fixed實現的，這樣定位的好處是無論主體內容怎麽變化，側邊的位置永遠保持不變，當然，這也是這種效果的弊端，網頁效果死板單一，所以，我們今天就要為這種側邊橫幅添加一個動畫效果。
具體的實現思路是，也是通過定位，但不是position：fixed，而是position：absolute，這種定位的效果是保持距離最近的position：relative的元素的距離不變，所以當外層元素滾動時，該元素也會隨之滾動和發生位置變化，下面我們來實現這種效果。
首先是要寫出基本的樣式結構：
<!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; border:none } #aside{ width: 150px; position: absolute; left: 0; top: 150px; } #aside img{ width: 100%; } p{ height: 50px; text-align: center; font-size: 20px; } </style> </head> <body> <div id="aside"> <imgsrc="images/float.jpg" alt=""> </div> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> <p>好好學習，天天向上</p> </body> </html>
其次，既然是涉及到滾動，就需要用到前面封裝的滾動函數和獲取元素的方法
function scroll() {
if(window.pageYOffset !== null){
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode === "CSS1Compat"){ // W3C
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
最後就是分析動畫效果了。
上面紫色的就是我們的橫幅廣告，在最開始通過定位給定了位置以後，它距離頂部的位置可以通過offsetTop獲得；當瀏覽器滾動後，瀏覽器向上滾動了scrollTop的高度，那麽該橫幅廣告也向上滾動了這麽多的高度，如果我們希望在滾動結束時，該元素能回到最初的位置，也就是距離瀏覽器頂部offsetTop高度的位置，該位置距離其父元素的高度為offsetTop與scrollTop之和，我們需要在滾動結束時，將該元素的定位的值賦予前面的兩者之和即可，並添加動畫效果，這樣，既能保證橫幅的位置不變，又能增強動畫效果。
window.onload = function () {
// 1. 獲取廣告頭部的高度
var offset_top = $(‘aside‘).offsetTop;
// 2. 監聽窗口的滾動
var begin = 0, end = 0, timer = null;
window.onscroll = function () {
// 2.0 清除定時器
clearInterval(timer);
// 2.1 獲取滾動的高度
var scroll_top = scroll().top;
end = offset_top + scroll_top;
// 2.2 緩動動畫
timer = setInterval(function () {
begin = begin + (end - begin) * 0.2;
$("aside").style.top = begin + "px";
console.log(begin, end);
// 清除定時器
if(Math.round(begin) === end){
clearInterval(timer);
}
}, 20);
}
}
完整詳細代碼下載：點這裏
側邊橫幅動畫效果