案例介紹 歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！我們來用JavaScript編程實戰案例，做一個背景圖像滾動效果。滾動滑鼠背景圖像縮小，下方滑動出現文字。通過實戰我們將學會obj.opacity方法、pageYOffset屬性、obj.style.backgroundSize方法 ...
案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個背景圖像滾動效果。滾動滑鼠背景圖像縮小，下方滑動出現文字。通過實戰我們將學會obj.opacity方法、pageYOffset屬性、obj.style.backgroundSize方法。
案例演示
案例設計
JavaScript實戰案例-背景圖像滑動
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構。
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼。
源碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼。
<!-- 有個小院-興趣編程 -->
<div class="bg-image" id="bg-image"></div>
<div class="container">
<h1>有個小院-興趣編程</h1>
<p>
有個小院是一個興趣編程的學習社群，旨在幫助對編程感興趣的朋友，可以幫助學習者，
找到編程開發工作，掌握編程技能等等。
</p>
<p>
霍大俠從事多年的互聯網產品開發和教育工作，希望通過興趣編程的方法，教大家學習編程開發。
通過上手開發有趣項目的形式，產生一個迭代開發學習的過程。
</p>
<!-- 多個p元以下省略 -->
</div>
然後我們來編寫核心的JavaScript代碼，通過getElementById獲取背景圖片信息，添加滑動事件，設置背景圖片的透明度，設置背景圖片的大小。
//有個小院-興趣編程
const bgImageEl=document.getElementById("bg-image");
addEventListener("scroll",()=>{
updateImage();
});
function updateImage() {
bgImageEl.opacity=1-pageYOffset/900;
bgImageEl.style.backgroundSize=160-pageYOffset/12+"%";
}
總結思考
學習點
1、obj.opacity：設置透明度。
2、pageYOffset：pageYOffset 設置或返回當前頁面相對於視窗顯示區左上角的 Y 位置。pageYOffset屬性相等於scrollY屬性。這些屬性是只讀的。
3、obj.style.backgroundsize：設置背景圖片的大小。
問答
1、pageYOffset是只讀的嗎？
2、obj.style.backgroundsize是用來設置背景圖片的大小的嗎？
關註我，跟著我每天學習一點點，讓你不再枯燥，不再孤單..
全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）
