寫在前面：博主是一只經過實戰開發歷練后投身培訓事業的“小山豬”，昵稱取自影片片《獅子王》中的“彭彭”，總是以樂觀、積極的心態對待周邊的事物，本人的技術路線從Java全堆疊工程師一路奔向大資料開發、資料挖掘領域，如今終有小成，愿將昔日所獲與大家交流一二，希望對學習路上的你有所助益，同時，博主也想通過此次嘗試打造一個完善的技術圖書館，任何與文章技術點有關的例外、錯誤、注意事項均會在末尾列出，歡迎大家通過各種方式提供素材，
- 對于文章中出現的任何錯誤請大家批評指出，一定及時修改，
- 有任何想要討論和學習的問題可聯系我：zhuyc@vip.163.com，
- 發布文章的風格因專欄而異，均自成體系，不足之處請大家指正，
程式員如何用"心"表白（結尾附原始碼）
本文關鍵字：情人節、表白、頁面滑動、播放器
文章目錄
- 程式員如何用"心"表白（結尾附原始碼）
- 一、寫在前面
- 二、展示效果
- 三、核心檔案
- 1. css/H5_index.css
- 2. js/H5_index.js
- 3. js/index.js
- 4. index.html
- 四、案例原始碼
一、寫在前面
轉眼又到了情人節，不管你此刻心里是否住著一個人，早做一些準備總是沒錯的，對于技術人，如何發揮自己的特長，為心儀的人準備一份特殊的禮物呢？
本文將介紹一個具備滑鼠滑動翻頁、頁面音樂播放功能的H5專案，重要的是可以最大限度的自定義內容，筆者認為，再酷炫的效果也只是工具，一定要用各種素材來將它填充完整，這樣對方才能感受到你的用心~
二、展示效果
本案例更加適合在移動端豎屏打開，本身也支持自適應，在選擇素材時需要注意一下圖片比例，
- 滑動翻頁效果
- 自定義文字
- 自定義圖片
- 自定義特效
- 音樂播放器
- 完整效果
三、核心檔案
1. css/H5_index.css
添加頁面和組件的具體用法查看H5_index.js
在添加頁面或組件時，可以在其中定義通用的樣式（將選擇器名稱與引數一致即可生效）：
- 添加頁面：
頁面引數：face -> 完整選擇器名稱：.h5_page_face
- 添加組件：
組件引數：slogan -> 完整選擇器名稱：.h5_component_name_slogan
2. js/H5_index.js
向頁面追加內容時需要修改的檔案，主要通過addPage()和addComponent()兩個方法，
- 無參addPage()
添加一個新的div平鋪整個顯示區域，默認引入.h5_page樣式（H5_index.css中），可在其中指定默認的背景圖片，
- 無name引數的addComponent()
添加一個div的子元素，在當前區域中顯示，可以為文字、圖片、帶背景的圖片等，具體支持的引數如下：
{
width: 純數字, -> 居中時填寫真實寬度的2倍或更多，否則文字可能折行，可以通過此屬性控制圖片大小
height: 純數字, -> 居中時填寫真實高度的2倍或更多，添加文字時可省略
center: true, -> 是否居中顯示
text: '自定義文字', -> 自定義文字的內容
css: {
// 自定義的css樣式，可以直接使用css的屬性，使用逗號隔開
// 此處設定的樣式優先級最高，可作為元素的初始效果
"opacity": 0, -> 初始為透明（不顯示）
"top": "240px" -> 距離頁面頂端240px
},
animateIn: { -> 元素出現時的影片效果
opacity: 1, -> 完全不透明（顯示）
top: 250 -> 最終位置為250px（此處不需要寫單位），這樣就可以出現一個10px的滑動出現效果
},
animateOut: { -> 元素消失時的影片效果
opacity: 0,
top: 300
},
delay: 1000 -> 影片開始執行的延時時間，可以使用這個屬性控制各組件的順序，單位為毫秒
}
- 有name引數的addPage()
使用name引數可以和預設的css選擇器進行系結，匹配規則見H5_index.css，可以預先指定背景圖片等，
- 有name引數的addComponent()
使用name引數可以和預設的css選擇器進行系結，匹配規則見H5_index.css，需要注意的是，傳入的json物件中的css屬性優先級更高，可以在css檔案中添加各種css3影片效果，
3. js/index.js
向播放器中配置曲目時需要修改的檔案，主要修改albums、trackNames、albumArtworks、trackUrl四個陣列，
- albums：歌曲名
- trackNames：作者名
- albumArtworks：與index.html中的元素id匹配
- trackUrl：資源路徑
4. index.html
直接運行的檔案，可以在其中引入其他的自定義檔案，需要在id為album-art的div中修改曲目（配圖、元素id與albumArtworks一致），
<div id="album-art">
<img src="mp3/1.jpg" class="active" id="_1">
<img src="mp3/2.jpg" id="_2">
<div id="buffer-box">加載中...</div>
</div>
四、案例原始碼
- 表白神器
CSDN認證博客專家
全堆疊開發工程師
大資料高級開發
大資料金牌講師
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/259520.html
標籤：其他