手机拍照和上传图片 //IOS有拍照、录像、选取本地图片功能,部分Android只有选择本地图片功能。Winphone不支持
<input type=http://www.likecs.com/"file" accept=http://www.likecs.com/"images/*" /> <input type=http://www.likecs.com/"file" accept=http://www.likecs.com/"video/*" />屏幕旋转的事件和样式
//JS处理 function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?\'landscape\':\'portrait\'; if(orientChk ==http://www.likecs.com/\'lapdscape\'){ //这里是横屏下需要执行的事件 }else{ //这里是竖屏下需要执行的事件 } } orientInit(); window.addEventListener(\'onorientationchange\' in window?\'orientationchange\':\'resize\', function(){ setTimeout(orientInit, 100); },false) //CSS处理 //竖屏时样式 @media all and (orientation:portrait){ } //横屏时样式 @media all and (orientation:landscape){ }audio元素和video元素在ios和andriod中无法自动播放
//音频,写法一 <audio src=http://www.likecs.com/"music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> //音频,写法二 <audio controls=http://www.likecs.com/"controls"> <source src=http://www.likecs.com/"music/bg.ogg" type=http://www.likecs.com/"audio/ogg"></source> <source src=http://www.likecs.com/"music/bg.mp3" type=http://www.likecs.com/"audio/mpeg"></source> 优先播放音乐bg.ogg,不支持在播放bg.mp3 </audio> //JS绑定自动播放(操作window时,播放音乐) $(window).one(\'touchstart\', function(){ music.play(); }) //微信下兼容处理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小结 //1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常 //2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间重力感应事件
// 运用HTML5的deviceMotion,调用重力感应事件 if(window.DeviceMotionEvent){ document.addEventListener(\'devicemotion\', deviceMotionHandler, false) } var speed = 30; var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData){ var acceleration = event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){ //这里是摇动后要执行的方法 yaoAfter(); } lastX = x; lastY = y; lastZ = z; } function yaoAfter(){ //do something } //说明:说见案例摇一摇效果中yao.js