HTML5和CSS3开发经验 一、DeviceOrientation事件实现摇一摇功能 二、动画侦听事件 三、常用事件 四、requestAnimationFrame()动画接口 五、CSS3 Animate动画样式库 六、手机和PC移动的兼容写法 七、rem与px的转换
devicemotion：设备传感器事件 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=3621
二、动画侦听事件
CSS3动画结束后侦听动画，
1、transitionEnd：针对transition属性的动画
2、webkitAnimationEnd：针对animation属性的动画
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>
三、常用事件
1、window.scrollTo(0,0); 隐藏地址栏
2、window.matchMedia(); 匹配媒体
3、navigator.connection; 决定手机是否运行在WiFi/3G等网络
4、window.devicePixelRatio; 决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)
5、window.navigator.onLine; 取得网络连接状态
6、window.navigator.standalone; 决定iPhone是否处于全屏状态
7、touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel
8、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);
9、element.webkitRequestFullScreen(); 调用全屏函数
四、requestAnimationFrame()动画接口
一、HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:
你可以用CSS3的animattion+keyframes;
你也可以用css3的transition;
你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;
当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
现在又多了一种实现动画的方案，那就是还在草案当中的window.requestAnimationFrame()方法。
二、初识requestAnimationFrame
也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
1、基本语法
可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。
requestAnimationFrame(callback)//callback为回调函数
2、一个简单的例子
模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。
为了演示方便加了一个运行按钮（看不到例子请刷新）。
1 <div id="test" style="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+ |
五、CSS3 Animate动画样式库
官方：http://daneden.github.io/animate.css/
参考：http://www.tuicool.com/articles/NF3Q3a
库文件：HTML5+CSS3资料
六、手机和PC移动的兼容写法
touchstart="touchstart";
touchmove="touchmove";
touchend="touchend";
touchcancel="touchcancel";
} else{ //pc浏览
touchstart='mousedown';
touchmove='mousemove';
touchend='mouseup';
touchcancel='mouseout';
}
});
七、rem与px的转换
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。
一、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% */ }
二、为什么要使用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 { 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- 480px) { 9 html,body,button,input,select,textarea { 10 font-size: 20.25px 11 } 12 } 13 14 @media screen and (min- 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>
转载链接：http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html