資訊專欄INFORMATION COLUMN
摘要：關(guān)鍵詞動(dòng)效多端兼容效果預(yù)覽截圖見附錄，在線地址實(shí)現(xiàn)小結(jié)想要說明的主要是兩點(diǎn)，一個(gè)是的運(yùn)用，另一個(gè)是在移動(dòng)端的兼容問題。多帶帶引用方法有如下這些移動(dòng)端兼容問題，微信內(nèi)置瀏覽器自動(dòng)全屏的問題。處理方法是在標(biāo)簽上加，微信內(nèi)置瀏覽器不起作用問題。
關(guān)鍵詞：動(dòng)效 svg video 多端兼容效果預(yù)覽
截圖見附錄，在線地址
實(shí)現(xiàn)小結(jié)想要說明的主要是兩點(diǎn)，一個(gè)是svg的運(yùn)用，另一個(gè)是video在移動(dòng)端的兼容問題。
鏤空效果的實(shí)現(xiàn)思路一是用png，優(yōu)點(diǎn)是簡(jiǎn)單直接，缺點(diǎn)就是非矢量，可能有鋸齒，多端需要多張圖；
思路二是用svg，優(yōu)點(diǎn)是矢量，可以直接用svg標(biāo)簽也可以像圖片一樣多帶帶引用，缺點(diǎn)就是需要一點(diǎn)學(xué)習(xí)成本。
顯然，這次采用的是思路二，對(duì)于svg的本次使用，簡(jiǎn)單說明下：
由于是全屏半透明“M”鏤空，因此首先想到的是有個(gè)直接全屏的svg，但是實(shí)際要響應(yīng)多終端，寬高比都不同，一個(gè)全屏的svg是不可行的。怎么辦呢？利用snap.svg等js庫動(dòng)態(tài)創(chuàng)建是不是可以呢？問題是很多時(shí)候鏤空的圖案是特殊的設(shè)計(jì)圖案，一般的程序員想去直接繪制也不太可行。
最后實(shí)現(xiàn)是設(shè)計(jì)師提供一個(gè)"M"svg文件，咱們根據(jù)屏幕大小實(shí)時(shí)的補(bǔ)全上邊左邊右邊部分。
對(duì)于svg的使用可以多帶帶引用文件也可以嵌入HTML中。
多帶帶引用方法有如下這些：
...
移動(dòng)端video兼容問題
1，微信內(nèi)置瀏覽器自動(dòng)全屏的問題。
處理方法是在video標(biāo)簽上加x5-playsinline="" playsinline="" webkit-playsinline=""
2，微信內(nèi)置瀏覽器z-index不起作用問題。
處理方法是在video便簽上加x5-video-player-type="h5"
3，實(shí)際中還有各種其他問題，例如自動(dòng)播放屬性設(shè)置無效，iOS端編碼格式要求等，最后因?yàn)闃I(yè)務(wù)及時(shí)間等因素綜合考慮，針對(duì)移動(dòng)觸屏端改用圖片循環(huán)播。
附錄：
PC端：
移動(dòng)端：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/11053.html
摘要：如何用獲取虛擬鍵盤高度前端早讀課月號(hào)早讀文章由湯谷投稿分享。大殺器和把動(dòng)畫轉(zhuǎn)換成原生動(dòng)畫初來乍到，本文搬運(yùn)自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號(hào)早讀文章由@湯谷投稿分享。正文從這開始～ 這是一個(gè)存在很久的歷史問題了，對(duì)于這樣一個(gè)具有普遍性的問題...
摘要：剖析新版，為你所用大漠第二個(gè)議題是大漠老師的，大漠老師是的站長，著有圖解核心技術(shù)與案例實(shí)戰(zhàn)。自定義屬性大漠老師多次強(qiáng)調(diào)，這叫做自定義屬性，不叫變量。 前言 對(duì)于我來講，雖然做前端那么多年，但對(duì) CSS 的探索非常少，很多 CSS 知識(shí)還是在畢業(yè)之前積累下來。揣著一本《精通CSS:高級(jí)Web標(biāo)準(zhǔn)解決方案(第二版)》（現(xiàn)在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...
摘要：財(cái)富管理專場(chǎng)上，螞蟻金服微貸事業(yè)群高級(jí)前端技術(shù)專家王卓做了主題為螞蟻微貸互動(dòng)營銷技術(shù)體系實(shí)踐的精彩分享。通過互動(dòng)技術(shù)，最終實(shí)現(xiàn)拉新，留存和促活等目標(biāo)。營銷技術(shù)方案對(duì)接研發(fā)平臺(tái)，通過鳳蝶系統(tǒng)和研發(fā)管理體系進(jìn)行打通。 摘要：以數(shù)字金融新原力(The New Force of Digital Finance)為主題，螞蟻金服ATEC城市峰會(huì)于2019年1月4日上海如期舉辦。財(cái)富管理專場(chǎng)上，螞...
摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來發(fā)布的前端每周清單...
閱讀 3653·2023-04-25 21:43
閱讀 3164·2019-08-29 17:04
閱讀 867·2019-08-29 16:32
閱讀 1597·2019-08-29 15:16
閱讀 2210·2019-08-29 14:09
閱讀 2803·2019-08-29 13:07
閱讀 1678·2019-08-26 13:32
閱讀 1374·2019-08-26 12:00
