HTML5和CSS3開發經驗

時間 2019-12-05

標籤 html5 html css3 css 開發經驗欄目 HTML5 简体版

原文原文鏈接

1、DeviceOrientation事件實現搖一搖功能

　　DeviceOrientation特性所提供的DeviceMotion事件封裝了設備的運動傳感器時間，經過改時間能夠獲取設備的運動狀態、加速度等數據（另還有deviceOrientation事件提供了設備角度、朝向等信息）。

　　devicemotion：設備傳感器事件 accelerationIncludingGravity：獲取設備加速度信息（返回x、y、z軸）.

　　accelerationIncludingGravity：返回獲取設備加速度信息，x、y、z軸

 1 <script>
 2     var SHAKE_THRESHOLD = 800;
 3     var last_update = 0;
 4     var x = y = z = last_x = last_y = last_z = 0;
 5 
 6     if (window.DeviceMotionEvent) {
 7 
 8         // DeviceMotion事件事件封裝了設備的運動傳感器時間，經過改時間能夠獲取設備的運動狀態、加速度等數據（另還有deviceOrientation事件提供了設備角度、朝向等信息）。
 9         window.addEventListener('devicemotion', deviceMotionHandler, false);
10     } else {
11         alert('本設備不支持devicemotion事件');
12     }
13 
14     function deviceMotionHandler(eventData) {
15         var acceleration = eventData.accelerationIncludingGravity;      // 返回獲取設備加速度信息，x、y、z軸
16         var curTime = new Date().getTime();
17         if ((curTime - last_update) > 100) {
18             var diffTime = curTime - last_update;
19             last_update = curTime;
20             x = acceleration.x;
21             y = acceleration.y;
22             z = acceleration.z;
23             var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
24             var status = document.getElementById("status");
25             if (speed > SHAKE_THRESHOLD) {
26                 var text = "x:"+x+"<br />y:"+y+"<br />z:"+z+"<br />speed:"+speed;
27                 status.innerHTML = text;
28             }
29 
30             last_x = x;
31             last_y = y;
32             last_z = z;
33         }
34     }
35 </script>

http://dtop.powereasy.net/Item.aspx?id=3621css

2、動畫偵聽事件

　　CSS3動畫結束後偵聽動畫，html

　　一、transitionEnd：針對transition屬性的動畫css3

　　二、webkitAnimationEnd：針對animation屬性的動畫git

1 <script>
2     $(".box").click(function(){
3         $(this).addClass("on");
4         $(this)[0].addEventListener("transitionend", function(){
5             $(".box").removeClass("on");
6         }, false);
7     })
8 </script>

3、經常使用事件

一、window.scrollTo(0,0);　　隱藏地址欄github

二、window.matchMedia();　匹配媒體web

三、navigator.connection; 決定手機是否運行在WiFi/3G等網絡canvas

四、window.devicePixelRatio; 決定屏幕分辨率(iPhone 4值爲2, 而Nexus One值爲1.5)瀏覽器

五、window.navigator.onLine; 取得網絡鏈接狀態sass

六、window.navigator.standalone; 決定iPhone是否處於全屏狀態網絡

七、touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

八、gesture事件 (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

window.addEventListener("orientationchange", function(e){ //window.orientation(0 is portrait, 90 and -90 are landscape) }, false); window.addEventListener("deviceorientation", function(e){ //e.alpha //e.beta //e.gamma }, false); window.addEventListener("devicemotion", function(e){ //e.accelerationIncludingGravity.x //e.accelerationIncludingGravity.y //e.accelerationIncludingGravity.z }, false);

九、element.webkitRequestFullScreen(); 調用全屏函數

4、requestAnimationFrame()動畫接口

1、HTML5/CSS3時代，咱們要在web裏作動畫選擇其實已經不少了:

　　你能夠用CSS3的animattion+keyframes;

　　你也能夠用css3的transition;

　　你還能夠用經過在canvas上做圖來實現動畫，也能夠藉助jQuery動畫相關的API方便地實現;

　　固然最原始的你還可使用window.setTimout()或者window.setInterval()經過不斷更新元素的狀態位置等來實現動畫，前提是畫面的更新頻率要達到每秒60次才能讓肉眼看到流暢的動畫效果。

　　如今又多了一種實現動畫的方案，那就是還在草案當中的window.requestAnimationFrame()方法。

2、初識requestAnimationFrame

也可這個方法原理其實也就跟setTimeout/setInterval差很少，經過遞歸調用同一方法來不斷更新畫面以達到動起來的效果，但它優於setTimeout/setInterval的地方在於它是由瀏覽器專門爲動畫提供的API，在運行時瀏覽器會自動優化方法的調用，而且若是頁面不是激活狀態下的話，動畫會自動暫停，有效節省了CPU開銷。

一、基本語法

能夠直接調用，也能夠經過window來調用，接收一個函數做爲回調，返回一個ID值，經過把這個ID值傳給window.cancelAnimationFrame()能夠取消該次動畫。

requestAnimationFrame(callback)//callback爲回調函數

二、一個簡單的例子

模擬一個進度條動畫，初始div寬度爲1px,在step函數中將進度加1而後再更新到div寬度上，在進度達到100以前，一直重複這一過程。

爲了演示方便加了一個運行按鈕（看不到例子請刷新）。

 1 <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
 2 <input type="button" value="Run" id="run"/>
 3 複製代碼
 4 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 5 var start = null;
 6 var ele = document.getElementById("test");
 7 var progress = 0;
 8 
 9 function step(timestamp) {
10     progress += 1;
11     ele.style.width = progress + "%";
12     ele.innerHTML=progress + "%";
13     if (progress < 100) {
14         requestAnimationFrame(step);
15     }
16 }
17 requestAnimationFrame(step);
18 document.getElementById("run").addEventListener("click", function() {
19     ele.style.width = "1px";
20     progress = 0;
21     requestAnimationFrame(step);
22 }, false);
23 複製代碼

瀏覽器支持狀況

既然仍是草案狀態下引入的一個功能，在使用全咱們就須要關心一下各瀏覽器對它的支持狀況了。就目前來講，主流現代瀏覽器都對它提供了支持，請看下圖：


31+	26+	10+	19+	6+

5、CSS3 Animate動畫樣式庫

官方：http://daneden.github.io/animate.css/

參考：http://www.tuicool.com/articles/NF3Q3a

庫文件：HTML5+CSS3資料

6、手機和PC移動的兼容寫法

一、先加入以下代碼

if ('ontouchstart' in window) { //手機瀏覽
touchstart="touchstart";
touchmove="touchmove";
touchend="touchend";
touchcancel="touchcancel";

} else{ //pc瀏覽
touchstart='mousedown';
touchmove='mousemove';
touchend='mouseup';
touchcancel='mouseout';
}

二、以下綁定觸摸事件便可兼容觸摸和非觸摸設備

$(window,'body').on(touchend,function(){

});

7、rem與px的轉換

　　rem是CSS3中新增長的一個單位值，他和em單位同樣，都是一個相對單位。不一樣的是em是相對於元素的父元素的font-size進行計算；rem是相對於根元素html的font-size進行計算。這樣一來rem就繞開了複雜的層級關係，實現了相似於em單位的功能。

1、Rem的使用

　　前面說了em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小，在咱們屢次使用時，就會帶來沒法預知的錯誤風險。而rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個參考值，這個參考值設置爲多少，徹底能夠根據您本身的需求來定。

　　假設就使用瀏覽器默認的字號16px，來看一些px單位與rem之間的轉換關係：

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |
-------------------------

若是你要設置一個不一樣的值，那麼須要在根元素<html>中定義，爲了方便計算，時常將在<html>元素中設置font-size值爲62.5%:

html { font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */ }

2、爲何要使用rem

　　像em單位同樣，在Responsive設計中使用rem單位很是有用。雖然他們都是相對單位，但使用rem單位能夠避開不少層級的關係。由於em是相對於他的父元素的font-size，而rem是相對於根元素<html>。好比說h1設置了font-size爲1rem以後，只要不重置html的font-size大小，不管他的父元素設置多大，對h1都不會有任何的影響。

實例：

 1 <style type="text/css">
 2     html { font-size: 12px; }
 3     ul{ margin: 0; padding: 0; border: 0; list-style: none;}
 4     .box li{ border-bottom: 1px #d1ccc0 solid; height: 2.5rem; line-height: 2.5rem }
 5     .box-l, .box-r { width:48%; height: 3.5rem; line-height: 3.5rem; text-align: center; margin: 0 1%; float:left; border-radius: 0.833rem; }
 6     .box-l { background-color: #e44151; }
 7     .box-r { background-color: #e44151; }
 8     @media screen and (min-width: 480px) {
 9         html,body,button,input,select,textarea {
10             font-size: 20.25px
11         }
12     }
13 
14     @media screen and (min-width: 600px) {
15         html,body,button,input,select,textarea {
16             font-size: 25px
17         }
18     }
19 </style>
20 
21 <div class="box">
22     <ul>
23         <li>臺間諜威逼利誘策反大陸女生</li>
24         <li>臺間諜威逼利誘策反大陸女生</li>
25         <li>臺間諜威逼利誘策反大陸女生</li>
26         <li>臺間諜威逼利誘策反大陸女生</li>
27         <li>臺間諜威逼利誘策反大陸女生</li>
28         <li>臺間諜威逼利誘策反大陸女生</li>
29     </ul>
30 </div>
31 
32 <div class="ind_cztx">
33     <div class="box-l">充值</div>
34     <div class="box-r">提現</div>
35 </div>