影片直播app原始碼,純JS實現旋轉木馬/3d相簿
影片直播app原始碼,純JS實現旋轉木馬/3d相簿
1.首先設定一個div,為其加上perspective的屬性(撐開空間),方便後邊觀察效果
/* 場景景深 */ #perspective{ perspective: 700px;/*此屬性是實現旋轉木馬的要點,能產生空間上的距離/延伸感。在此盒子中放置圖片的盒子便可以實現向網頁內部延伸的感覺*/ }
2.其次,設定裝有圖片盒子的容器wrap,使其居中顯示,並加上position:relative的屬性,讓其內的圖片定位。加上transform屬性,在之後會用到。
#wrap{ position: relative; width: 200px; height: 200px; margin: 150px auto; border: 1px solid black; transform-style: preserve-3d; /*實現3d效果的關鍵步驟,與boxshadow配合使用可以忽略層級問題,之後會說到*/ transform: rotateX(0deg) rotateY(0deg) ;//為盒子的3d效果和旋轉效果做準備。 }
3.加入圖片,設定樣式,使用position:absolute;使其重疊。以陣列的形式獲取,並根據其陣列長度length來計算圖片的旋轉角度。
#wrap img{ position: absolute; width: 200px; } <script> var oImg = document.getElementsByTagName('img'); var Deg = 360/oImg.length; oWrap = document.getElementById('wrap'); /*順便拿一下容器*/ </script>
4.遍歷陣列,使其沿y軸旋轉Deg度。此處使用了原型,使用foreach方法遍歷了陣列,讓其內每個圖片都執行了function(el,index)。使用index下標區分開了陣列內每個圖片需要旋轉的不同度數(第一張0°(Deg * 0) 第二張Deg度 (Deg * 1) 第三張(Deg * 2)度…)
/*oImg表示陣列物件,function(el,index)表示陣列內每個物件要執行的函式,index為其下標。*/ Array.prototype.forEach.call(oImg,function(el,index){ el.style.transform = "rotateY("+Deg*index+"deg)"; })
以上就是 影片直播app原始碼,純JS實現旋轉木馬/3d相簿,更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2952987/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 影片直播app原始碼,純css實現橫向滾動APP原始碼CSS
- 影片直播app原始碼,JS使用陣列方法實現字串反轉APP原始碼JS陣列字串
- 影片直播app原始碼,css預載入旋轉動畫與流光字型APP原始碼CSS動畫
- 微信小程式swiper旋轉木馬微信小程式
- 影片直播原始碼,js實現節流和防抖原始碼JS
- 程式猿生存指南-52 旋轉木馬
- 純JS實現走馬燈JS
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- 直播平臺搭建原始碼,純js實現編輯器撤消/重做原始碼JS
- 旋轉相簿
- 教你實現,搭建直播影片app原始碼的賬號體系APP原始碼
- app直播原始碼,Node.js實現密碼雜湊加密APP原始碼Node.js密碼加密
- iOS實現3D旋轉iOS3D
- app直播原始碼,css預載入旋轉動畫 與 流光字型APP原始碼CSS動畫
- 影片直播app原始碼,vue實現列表自動滾動的方式APP原始碼Vue
- three.js實現的地球3D旋轉效果JS3D
- [開發教程]第35講:Bootstrap旋轉木馬boot
- app直播原始碼如何實現直播間紅包功能APP原始碼
- 直播app系統原始碼,圖片Loading旋轉動畫效果APP原始碼動畫
- 直播軟體原始碼,CSS3實現圖片立體旋轉動畫原始碼CSSS3動畫
- 直播原始碼開發,實現相簿的上傳和縮放裁剪原始碼
- 影片直播原始碼,前端canvas動態驗證碼實現原始碼前端Canvas
- 58行程式碼實現3D相簿行程3D
- 如何實現圖片的3D旋轉,而且是不停旋轉?3D
- 影片直播原始碼,Android TextView設定跑馬燈效果原始碼AndroidTextView
- app直播原始碼,利用原生JS實現回到頂部以及吸頂效果APP原始碼JS
- three.js實現的3D球狀拖動旋轉效果JS3D
- 為了直播流暢,實現直播商城原始碼的轉碼原始碼
- app直播原始碼,android AES加密解密實現APP原始碼Android加密解密
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- 影片直播原始碼實現直播技術曾遇到的那些小問題原始碼
- CSS3實現的3D旋轉程式碼例項CSSS33D
- 影片直播app原始碼,EditText保留小數位數APP原始碼
- 直播帶貨app原始碼,獲取直播影片的第一幀APP原始碼
- 快影app怎麼旋轉影片?快影影片瞬間旋轉的方法教程APP
- 影片直播系統原始碼,非同步處理實現程式碼分析原始碼非同步
- app直播原始碼,js實現上傳圖片型別+大小+尺寸驗證APP原始碼JS型別
- 直播APP原始碼實現直播流程上需要注意的內容APP原始碼