整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          學習分享:JavaScript實現網頁版閱讀器

          現在手機上的文本閱讀app已經非常豐富,良好的閱讀體驗與海量的書庫常常令我感到無比興奮。

          我想到8年前用一點幾寸屏幕的mp3看電子書的情景,頓生一種淡淡的溫馨。再久遠一些,小的時候,我也經常和小伙伴們組團去書店看白書,也就是白看書。古老的木質書架上那一疊疊厚重的黃皮小說書,在年幼的我眼里仿佛是比盤子里的午餐肉更加美味可口的東西。

          而在當今這個信息化的時代,看書變得空前的便利,可是兒時那種期待和興奮的感受卻消失在了時間的長河。

          歲月在流逝,時代在進步。

          愿放下所有的浮躁,在新的時代愉快地生活,無所謂明天怎樣,我都相信肯定比今天更好。

          本文以一個網頁版閱讀器作為案例,展示JavaScript中,對滾動條的一些處理,這是完成以后的樣子:

          當我滾動條往上滾動的時候,屏幕右下角會出現一個向上的箭頭:

          而往下滾動的時候,又自動消失。

          當我點擊這個半透明的箭頭按鈕,就會自動滑動到章節的最頂端。

          本章就實現這個小功能。

          開發工具:HBuilder(個人喜歡,順從潮流放棄了使用大半年的EditPlus,不過EditPlus確實鍛煉了我拼寫單詞的能力)

          測試環境:谷歌瀏覽器

          正文

          1. 頁面布局與繪制

          我們寫一個基本的html模板

          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="UTF-8">
           <title>TextReader</title>
           <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
           
           <style type="text/css">
           *{
           padding: 0;
           margin: 0;
           }
           </style>
           </head>
           <body>
           
           </body>
          </html>
          

          接著,我們把背景圖片引入進來(尺寸略有調整):

          body{
           background: url(bg.jpg) no-repeat;
           background-size: 100%;
          }
          

          我們先寫一個div,作為盛放整個手機的父容器。

          在它的css樣式中,我們做了居中定位(水平)。

          .phone {
           width:322px ;
           height:550px; 
           position:relative;
           left:35%;
           top:35px;
           background: #66CC00;
          }
          <div class='phone'></div>
          

          接下來,引入上下兩端的樣式圖片。

          其實,手機的頂部和底部就是兩張圖片:

          我們先把頂部圖片引入進來,在引入圖片之前,先畫兩個div來盛放圖片。

          <body>
           <div class='phone'>
           <div class='phone_top'></div>
           
           <div class='phone-bottom'></div>
           </div>
          </body>
          

          然后,通過背景圖的方式把圖片貼進來。

          .phone .phone_top {
           background: url(phone_top.png);
           height:42px;
          }
          .phone .phone-bottom {
           background: url(phone_bottom.png);
           position: absolute;
           height: 42px;
           width: 100%;
           bottom: 0;
          } 
          

          這樣一來,一個手機的大概模子就出來了,接下來,我們把屏幕區域加上去。

          .phone .container{
           overflow-x: hidden;
           overflow-y: auto;
           width:90%;
           background:#ccc;
           height:456px;
           font-size:14px;
           text-align:left;
           background:#dcf3dc;
           font-family:微軟雅黑;
           color:#555;
           line-height:28px;
           padding:16px;
           text-indent: 2em;
           padding: 16px 16px 0px 16px;
          }
          <body>
           <div class='phone'>
           <div class='phone_top'></div>
           <div class='container'></div>
           <div class='phone-bottom'></div>
           </div>
          </body>
          

          OK,現在可以把父容器的背景色給去掉了。

          background: #66CC00; //去掉
          

          為了把手機模型做得更像一點,我們手動給它加一個按鈕,額,就手動畫一個吧。

          .back {
           width: 30px;
           height: 30px;
           position: absolute;
           left: 50%;
           margin-left: -15px;
           border: 2px solid #c7bcbc;
           top: 4px;
           border-radius: 50%;
          }
          <div class='phone-bottom'>
           <span class='back'></span>
          </div>
          

          雖然span是行內元素,但是因為我們給它設置了 position: absolute , 所以寬度和高度依然是起作用的。

          我也是在寫這個案例的時候無意中發現的,我以前一直以為需要手動給行內元素升級為塊級元素才行。

          這樣,我們的頁面布局差不多久完成啦。

          2. 文字部分設計與美化

          接下來,我們給閱讀器模擬一些數據。

          <body>
           <div class='phone'>
           <div class='phone_top'></div>
           <div class='container'>
           <h4>刀劍神域 </h4>
           <p>
           在一群好奇心旺盛的高手花了整整一個月測量后,發現最底層區域的直徑大約有十公里,足以輕松容納下整個世田谷區。再加上堆積在上面百層左右的樓層,其寬廣的程度可說超乎想像。整體的檔案量大到根本無法測量。 這樣的空間內部有好幾個都市、為數眾多的小型街道與村落、森林和草原,甚至還有湖的存在。而連接每個樓層之間的階梯只有一座,階梯還都位于充斥怪物的危險迷宮區域之中,因此要發現并通過階梯可以說是相當困難。但只要有人能夠突破阻礙抵達上面的樓層,上下層各都市的「轉移門」便會連結起來,人們也就可以自由來去兩個樓層之間。
           </p>
           <p>
           經過兩年的時間,這個巨大城堡就這樣被逐漸地往上攻略,目前已到達第七十四層。城堡的名稱是「艾恩葛朗特」。這座持續飄浮在空中、吞噬了將近六千人,充滿著劍與戰斗的世界。它的另一個名字是——SwordArtOnline刀劍神域」。閃爍著深灰色光芒的劍尖,淺淺地劃過我的肩膀。 那固定顯示在視線左上角的細長橫線,好不容易縮短了長度。同時,似乎有只冰冷的手掌,撫摸過我胸口深處。 
           </p>
           <p>
           橫線——那稱為HP條的藍色條狀物,可以看出我的生命殘值。雖然它還有八成左右的殘值,但不能把事情看得太過于樂觀。因為相對來說,我已經朝死亡深淵前進了兩步。 在敵人的劍再度進入攻擊動作之前,我就先往后跳開一大步,以保持與敵人之間的距離。 
           </p>
           <p>「呼……」 
           </p>
           <p>硬是吐了一大口氣來調整一下氣息。在這個世界的「身體」雖然不需要氧氣,但在另一邊,也就是躺在真實世界里的真正身體,現在呼吸應該非常劇烈。而隨意擺放的手應該正流著大量冷汗,心跳也加速到破表了吧。 </p>
           
           <p>這也是理所當然的事。就算我眼前所見全部都是虛擬的立體影像對象,減少的也只是數值化的生命值,但我現在的確是賭上自己的性命在戰斗。 從賭上性命這點來看,這場戰斗真是相當不公平。因為,眼前的「敵人」——這除了擁有閃耀著光芒的深綠鱗片皮膚與長手臂外,還有著蜥蜴頭與尾巴的半人半獸怪物,不只外表不是人類、甚至沒有真實的生命。它只不過是不論被殺掉多少次,都可以由系統無限重生的數字文件檔案集合體。 </p>
           <p>不對。 目前,操縱這只蜥蜴人的AI程序正在觀察、學習我的戰斗方式,用以不斷提升自己的應對能力。但這些學習檔案,在該個體消滅后便會重置,而且不會反饋到下次出現在這個區域的同種個體上。 
           </p>
           
           </div>
           <div class='phone-bottom'>
           <span class='back'></span>
           </div>
           </div>
          </body>
          

          滾動條的樣式不太美觀,我們將其美化一下

          /** 滾動條樣式美化 */
          ::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}
          ::-webkit-scrollbar-button{background-color:#e5e5e5;}
          ::-webkit-scrollbar-track{background:#999;}
          ::-webkit-scrollbar-track-piece{background:#ccc}
          ::-webkit-scrollbar-thumb{background:#666;}
          ::-webkit-scrollbar-corner{background:#82AFFF;}
          ::-webkit-scrollbar-resizer{background:#FF0BEE;}
          scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
          scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
          scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}
          

          這樣就好看多了。

          標題部分有一點突兀,我們給出四條美化的建議:

          1. 標題居左對齊

          2. 底部畫一條線,與小說正文分開,并且空開一些。

          3. 字體顏色稍微淡一些,不要太黑

          4. 字間稍微距大一些

          于是

          .phone .container h4 {
           text-indent: 0;
           margin-bottom: 1em;
           color:#736357;
           border-bottom:1px solid #736357;
           letter-spacing: 2px;
          }
          

          這樣好看一些了吧,當然,每個人審美觀不同啦,你也可以調成自己喜歡的樣式。

          段落之間和文字間距都太小了,我們也調一下,不要那么小氣嘛,哈哈。

          .phone .container p {
           margin-bottom: 15px;
           letter-spacing: 2px;
          }
          

          恩,好多了。

          3. 引入向上的箭頭圖標

          我們準備了一張半透明的箭頭圖標,現在將其引入。

          <body>
           <div class='phone'>
           <div class='phone_top'></div>
           <div class='container'>
           
           <span id='toTop'></span>
           
           <h4>刀劍神域</h4>
           <p>
           在一群好奇心旺盛的高手花了整整一個月測量后,發現最底層區域的直徑大約有十公里,足以輕松容納下整個世田谷區。再加上堆積在上面百層左右的樓層,其寬廣的程度可說超乎想像。整體的檔案量大到根本無法測量。 這樣的空間內部有好幾個都市、為數眾多的小型街道與村落、森林和草原,甚至還有湖的存在。而連接每個樓層之間的階梯只有一座,階梯還都位于充斥怪物的危險迷宮區域之中,因此要發現并通過階梯可以說是相當困難。但只要有人能夠突破阻礙抵達上面的樓層,上下層各都市的「轉移門」便會連結起來,人們也就可以自由來去兩個樓層之間。
           </p>
           <p>
           經過兩年的時間,這個巨大城堡就這樣被逐漸地往上攻略,目前已到達第七十四層。城堡的名稱是「艾恩葛朗特」。這座持續飄浮在空中、吞噬了將近六千人,充滿著劍與戰斗的世界。它的另一個名字是——SwordArtOnline刀劍神域」。閃爍著深灰色光芒的劍尖,淺淺地劃過我的肩膀。 那固定顯示在視線左上角的細長橫線,好不容易縮短了長度。同時,似乎有只冰冷的手掌,撫摸過我胸口深處。 
           </p>
           <p>
           橫線——那稱為HP條的藍色條狀物,可以看出我的生命殘值。雖然它還有八成左右的殘值,但不能把事情看得太過于樂觀。因為相對來說,我已經朝死亡深淵前進了兩步。 在敵人的劍再度進入攻擊動作之前,我就先往后跳開一大步,以保持與敵人之間的距離。 
           </p>
           <p>「呼……」 
           </p>
           <p>硬是吐了一大口氣來調整一下氣息。在這個世界的「身體」雖然不需要氧氣,但在另一邊,也就是躺在真實世界里的真正身體,現在呼吸應該非常劇烈。而隨意擺放的手應該正流著大量冷汗,心跳也加速到破表了吧。 </p>
           
           <p>這也是理所當然的事。就算我眼前所見全部都是虛擬的立體影像對象,減少的也只是數值化的生命值,但我現在的確是賭上自己的性命在戰斗。 從賭上性命這點來看,這場戰斗真是相當不公平。因為,眼前的「敵人」——這除了擁有閃耀著光芒的深綠鱗片皮膚與長手臂外,還有著蜥蜴頭與尾巴的半人半獸怪物,不只外表不是人類、甚至沒有真實的生命。它只不過是不論被殺掉多少次,都可以由系統無限重生的數字文件檔案集合體。 </p>
           <p>不對。 目前,操縱這只蜥蜴人的AI程序正在觀察、學習我的戰斗方式,用以不斷提升自己的應對能力。但這些學習檔案,在該個體消滅后便會重置,而且不會反饋到下次出現在這個區域的同種個體上。 
           </p>
           
           </div>
           <div class='phone-bottom'>
           <span class='back'></span>
           </div>
           </div>
          </body>
          

          樣式如下:

          .phone .container #toTop {
           width: 40px;
           height: 60px;
           display: inline-block;
           position: absolute;
           background: url(top.png) no-repeat;
           background-size: 100%;
           bottom:80px;
           right: 15px;
           opacity: 0.7;
          }
          

          引進來了。

          4. js控制

          我們通過jQuery的animate方法來實現回到頂部的動畫,實現該功能的核心邏輯就是控制滾動條距離頂部的高度,也就是scrollTop,讓它變為0就可以了。

          //單機圖標直接返回頂部
          $('#toTop').on('click',function(){
           $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){
           $('#toTop').css({'opacity' : 0}); 
           });
           
           return false;
          });
          

          最后,我們還希望實現的一個效果就是,只有在滾動條往上拖動的時候,才把按鈕顯示出來,否則就隱藏該按鈕。畢竟,我們在閱讀的時候都不希望一直有個小圖標吧。

          實現思路也很簡單,就是判斷當前滾動條到底是向上滾動呢,還是向下滾動?

          然后設置按鈕的透明度就行了,這時候,我們需要對滾動條進行監聽,如果向上滾動就顯示按鈕,否則隱藏按鈕,實現代碼如下:

          var justScrollTop = 0; //記錄上一次滾動條距離頂部的位置
          //滾動條監聽事件
          $('.phone .container').on('scroll',function(e){
           if(e.target.scrollTop > justScrollTop){
           $('#toTop').css({'opacity' : 0}); //隱藏
           }else{
           $('#toTop').css({'opacity' : 0.8}); //顯示
           }
           
           justScrollTop = e.target.scrollTop;
          });
          

          效果:

          如果有沒看明白的地方,歡迎在下面評論,或者私信我,都可以。

          如果有必要,我會在下一期通過舉例子的方式做解答。

          TML: HyperText Markup Language 超文本標記語言

          HTML代碼不區分大小寫, 包括HTML標記、屬性、屬性值都不區分大小寫;

          任何空格或回車鍵在代碼中都無效,插入空格或回車有專用的標記,分別是 、<br>

          HTML標記中不要有空格,否則瀏覽器可能無法識別。

          如何添加注釋(comment:評論;注釋)

          <!-- -->
          <comment></comment>
          <!-- --> 不能留有空格


          字符集

          <meta http-equiv="Content-Type" content="text/html;charset=#"/>


          <base target="_blank">

          可以將a鏈接的默認屬性設置為_blank屬性

          單個標簽要有最好有結束符(可以沒有結束符)

          <br/> <img src="" width="" /> 

          便于兼容XHTML(XHTML必須要有結束符)

          HTML標簽的屬性值可以有引號,可以沒有引號,為了提高代碼的可讀性,推薦使用引號(單引號和雙引號),盡管屬性值是整數,也推薦加上引號。

          <marquee behavior="slide"></marquee> 

          便于兼容XHTML(XHTML必須要有引號)

          <marquee behavior=slide></marquee>

          經過測試,以上程序都可以正確運行


          HTML標簽涉及到的顏色值格式:

          color_name 規定顏色值為顏色名稱的文本顏色(比如 "red")。

          hex_number 規定顏色值為十六進制值的文本顏色(比如 "#ff0000")。

          rgb_number 規定顏色值為 rgb 代碼的文本顏色(比如 "rgb(255,0,0)")。

          transparent 透明色 color:transparent

          rgba(紅0-255,綠0-255,藍0-255,透明度0-1)

          opacity屬性: 就是葫蘆娃兄弟老六(技能包隱身)

          css:

          div{opacity:0.1} /*取值為0-1*/

          英文(顏色值)不區分大小寫

          HTML中顏色值:采用十六進制兼容性最好(十六進制顯示顏色效果最佳)

          CSS中顏色值:不存在兼容性

          紅色 #FF0000

          綠色 #00FF00

          藍色 #0000FF

          黑色: #000000

          灰色 #CCCCCC

          白色 #FFFFFF

          青色 #00FFFF

          洋紅 #FF00FF

          黃色 #FFFF00


          請問后綴 html 和 htm 有什么區別?

          答: 1. 如果一個網站有 index.html和index.htm,默認情況下,優先訪問.html

          2. htm后綴是為了兼容以前的DOS系統8.3的命名規范

          XHTML與HTML之間的關系?

          XHTML是EXtensible HyperText Markup Language的英文縮寫,即可擴展的超文本標記語言.

          XHTML語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執行.

          XHTML是用來代替HTML的, 是2000年w3c公布發行的.

          XHTML是一種增強了的HTML,它的可擴展性和靈活性將適應未來網絡應用更多的需求.

          XHTML是基于XML的應用.

          XHTML更簡潔更嚴謹.

          XHTML也可以說就是HTML一個升級版本.(w3c描述它為'HTML 4.01')

          XHTML是大小寫敏感的,XHTML與HTML是不一樣的;HTML不區分大小寫,標準的XHTML標簽應該使用小寫.

          XHTML屬性值必須使用引號,而HTML屬性值可用引號,可不要引號

          XHTML屬性不能簡寫:如checked必須寫成checked="checked"

          單標記<br>, XHTML必須有結束符<br/>,而HTML可以使用<br>,也可以使用<br/>

          除此之外XHTML和HTML基本相同.


          網頁寬度設置多少為最佳?

          960px


          target屬性值理解

          _self 在當前窗口中打開鏈接文件,是默認值

          _blank 開啟一個新的窗口打開鏈接文件

          _parent 在父級窗口中打開文件,常用于框架頁面

          _top 在頂層窗口中打開文件,常用語框架頁面


          字符集:

          charset=utf-8

          Gb2312 簡單中文字符集, 最常用的中文字符

          Gbk 簡繁體字符集, 中文字符集

          Big5 繁體字符集, 臺灣等等

          Utf-8 世界性語言的字符集

          ANSI編碼格式編碼格式的擴展字符集有gb2312和gbk

          單位問題:

          HTML屬性值數值型的一般不帶單位, CSS必須帶單位;


          強制刷新

          ctrl+F5

          介: 畢業不說再見,青春不散場!在云端,在一起!在問答https://developer.aliyun.com/ask/321737的留言區域曬出自己「線上環境」部署的畢業紀念冊,在6月30號18點之前點贊數前10可以獲得我們送出的畢業大禮包,阿里云的公仔盲盒一個以及10元的代金券一張,讓你的青春永遠在線!

          畢業不說再見,青春不散場

          經歷了動蕩的2020年,讓2021年的同窗時光顯得格外珍惜。早上的起床號仍然會響起,食堂的阿姨照常準備早餐,門口的大爺照例檢查著證件和健康碼,三年在一起已經980天18個小時51分59秒。但是又是一年畢業季,疫情影響了你們開學的時間,卻沒有影響到你們畢業,少了盛大的畢業典禮,但是一起走過的青春不會忘記。

          畢業是千百萬個人,千百萬個夏天的故事,我們有千百萬個理由讓你的畢業更加特別一點。阿里云云開發平臺的用戶安南同學定制了他的專屬畢業紀念冊,他將他的紀念冊奉獻給大家,讓所有的畢業生都可以快速擁有自己的云上畢業紀念冊,通過阿里云云開發平臺一鍵上線。不管你是IT大拿、還是建站小白,都可以分分鐘獲取自己專屬的也畢業紀念冊。畢業不說再見,青春不散場!

          畢業紀念冊效果圖

          畢業紀念冊的上線步驟

          1. 創建應用

          a. 登陸云開發平臺

          登錄云開發平臺。使用阿里云賬號登錄,按照提示創建團隊,點擊同意協議。沒有阿里云賬號的用戶,在登錄頁面注冊后進行登錄即可。為了保證最好的使用體驗,請使用Chrome瀏覽器。

          b. 創建應用

          打開快速開始,點擊創建新應用。

          c. 云資源訪問授權。

          云資源訪問授權。如果您之前沒有使用過云開發平臺,會出現云資源授權管理的選項,往下拉出現直至同意授權的字樣,點擊「同意授權」后出現授權成功,點擊進入「下一步」。

          d. 選擇語言和計算服務。

          分別選擇開發語言NodeJS,創建方式選擇直接創建,然后點擊下一步。然后填寫應用的名稱和介紹,選擇所屬產品線(按需要選擇),計算服務選擇FC。然后點擊完成,云服務如果沒有開通需要開通一下,開通不收費。

          2. 配置和上線應用。

          a. 下載畢業紀念冊的代碼。

          訪問https://github.com/cloudworkbench/memory-album 下載源代碼后解壓縮到本地目錄。

          b. 創建環境

          應用創建成功后會跳轉到應用詳情頁面,點擊日常環境的「部署配置」,依次選擇 【自動創建環境】-【選擇任意可用區】-【自動創建交換機】

          c. 在線開發部署

          環境配置完成后,完成后回到如下頁面,點擊在線開發部署,在新的窗口打開WebIDE部署, 點擊「在線開發部署」,打開CloudIDE上傳代碼文件。

          d. 上傳代碼文件

          CloudIDE加載完成后,選中下載后解壓好的文件,將源碼文件直接拖拽到CloudIDE的根目錄,上傳完成后記得保存并且推送。

          e. 一鍵上線畢業紀念冊

          點擊CloudIDE左側的部署Tab,選擇日常環境,點擊立即部署,在彈出框中確認配置后繼續部署。部署完成后產生臨時域名,即可訪問好部署的站點??禳c給同學們分享一下吧,臨時域名30分鐘有效期。

          f. 綁定線上域名

          生產的臨時域名是云開發平臺免費提供的,有效期只有30分鐘,過期之后需要手動刷新才可以生效。如果想保留作為長期的畢業站點使用,可以綁定自己的域名,現在很多域名1塊錢首年。

          在你購買的域名控制臺,配置CNAME映射到該域名,下圖以阿里云的域名控制臺為例。如果你是新購的域名還沒有備案的話,在云開發平臺創建一個region在香港的產品也可以立即使用。

          在云開發平臺的應用詳情頁面點擊線上環境的「域名配置」,綁定配置好的域名,并且按照日常環境的配置進行「環境配置」,保存后打開「在線開發部署」進行一鍵部署即可使用自己的域名進行訪問。

          畢業紀念冊可定制的功能

          1. 背景圖更換

          在index.html中更改url的路徑images/classroom.png,或者替換文件夾里classroom.png文件

          body {
                  perspective: 1000px;
                  display: block;
                  padding:0;
                  margin:0;
                  overflow:hidden;
                  background-image:url("images/classroom.png");
                  background-position: center center;
                  background-repeat: no-repeat;
                  background-size: cover;


          櫻花透明度

          在index.html中更改opacity 0~1之間的數字,1是完全清晰 0是隱形

          /*櫻花透明度*/
              canvas {
                  padding:0;
                  margin:0;
                  opacity:0.3;

          在一起計時


          在js/time.js下輸入入學年份就可以算出來在一起的時間

          var arr = "2018-10-1 21:00:00".split(/[- :]/);//改這里
          var box = document.getElementsByClassName('textCon')[0];

          黑白上畢業紀念的話

          在js/typing.js中修改str的內容以及顯示的速度,也就是到時候黑板上顯示的內容,字體大小/顏色/位置可以在css中調整

          let divTyping = document.getElementById('text')//div
          let i = 0,//初始化
              timer = 0,
              str = '山無棱,天地合,才敢與君絕'//要顯示的字
          
          function typing () {
              if (i <= str.length) {
                  divTyping.innerHTML = str.slice(0, i++) + '_'//當字沒顯示完的時候,從字符串上切下來上去
                  timer = setTimeout(typing, 450)//每次的間隔
              }


          旋轉相冊

          在css/xuanzhuan.css中,自定義圖片, 圖片大小 以及 旋轉相冊位置,可以替換掉image文件夾里的圖片。

          .xuanzhuan {
              width:200px;
              height:200px;
              margin: 100px auto;
              background: url("../images/xuanzhuan/shu.jpg") no-repeat;
              background-size: cover;
              transform-style: preserve-3d;
              position: absolute;
              transition: 15s linear;
              top: 50%;
              left: 42%;
              z-index: initial;
          }
          .xuanzhuan:hover{
              transform: rotateY(360deg);
          }
          .xuanzhuan div{
              height:150px;
              width: 200px;
              position: absolute;
              background-size: cover;
              background: no-repeat;
          }
          .xuanzhuan div:nth-child(1){ /*0,0,2,1*/
              background: url("../images/xuanzhuan/1.jpg");
              background-size: cover;
              transform:rotateY(0deg) translateZ(400px);
          }
          .xuanzhuan div:nth-child(2){
              background: url("../images/xuanzhuan/2.jpg");
              background-size: cover;
              transform:rotateY(60deg) translateZ(400px);
          }
          .xuanzhuan div:nth-child(3){
              background: url("../images/xuanzhuan/3.jpg");
              background-size: cover;
              transform:rotateY(120deg) translateZ(400px);
          }
          .xuanzhuan div:nth-child(4){
              background: url("../images/xuanzhuan/4.jpg");
              background-size: cover;
              transform:rotateY(180deg) translateZ(400px);
          }
          .xuanzhuan div:nth-child(5){
              background: url("../images/xuanzhuan/5.jpg");
              background-size: cover;
              transform:rotateY(240deg) translateZ(300px);
          }
          .xuanzhuan div:nth-child(6){
              background: url("../images/xuanzhuan/6.jpg");
              background-size: cover;
              transform:rotateY(300deg) translateZ(300px);
          }

          BGM音樂

          這里采用的是外鏈引入音樂的方式,你也可以用自己本地的音樂文件,那樣打開更快,只要放到項目根路徑下直接引用就行。先生成外鏈,然后在index.html中引入,在index.html下的audio標簽的里的source標簽的src屬性中粘貼鏈接。

          <!--音樂-->
          <audio controls class="music">
              <source class="music_a" src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg">
          </audio>

          本文為阿里云原創內容,未經允許不得轉載。


          主站蜘蛛池模板: 国产一区玩具在线观看| 人妻精品无码一区二区三区| 亚洲中文字幕丝袜制服一区| 久久久久久免费一区二区三区| 精品少妇一区二区三区视频| 亚洲国产日韩在线一区| 精品国产一区二区三区2021| 久久人妻av一区二区软件| 日本精品高清一区二区2021| 视频一区精品自拍| 免费一区二区三区四区五区| 亚洲乱码一区二区三区在线观看| 熟女性饥渴一区二区三区| 日本美女一区二区三区| 亚洲国产精品一区| 中文字幕在线视频一区 | 久久精品中文字幕一区| 2021国产精品视频一区| 一区二区三区福利| 国产麻豆媒一区一区二区三区| 性无码一区二区三区在线观看| 少妇精品久久久一区二区三区| 精品国产毛片一区二区无码| 中文字幕日韩精品一区二区三区| 亚洲第一区香蕉_国产a| 日本夜爽爽一区二区三区| 亚洲综合一区无码精品| 精品国产免费一区二区三区香蕉 | 国产精品 视频一区 二区三区| 国产人妖在线观看一区二区| 亚拍精品一区二区三区| 精品不卡一区二区| 中文字幕一区视频一线| 丰满岳乱妇一区二区三区| 国产麻豆精品一区二区三区| 久久精品午夜一区二区福利| 骚片AV蜜桃精品一区| 国产伦理一区二区| 无码国产精品一区二区免费3p| 国产成人精品无人区一区 | 亚洲一区二区久久|