案例介紹
歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個背景影像滾動效果，滾動滑鼠背景影像縮小，下方滑動出現文字，通過實戰我們將學會obj.opacity方法、pageYOffset屬性、obj.style.backgroundSize方法，
案例演示
向下滾動滑鼠，背景圖片縮小顯示文字，
案例設計
JavaScript實戰案例-背景影像滑動
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構，
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼，
原始碼學習
進入核心代碼學習，我們先來看HTML中的核心代碼，
<!-- 有個小院-興趣編程 -->
<div id="bg-image"></div>
<div >
<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 (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540643.html
標籤：其他
下一篇：VUE常用方法