【html5 DeviceOrientation来实现手机网站上的摇一摇功能】的更多相关文章

html5 DeviceOrientation来实现手机网站上的摇一摇功能

原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容. ——————————————————— 介绍之前做两个声明: 1.以下代码可以直接运行,当然你别忘了引用jQuery才行,我可提醒了,别到时候跑不起来骂我就成: 2.下面的实现思想参照了网上的一些文章,自己做了以下整理,对代码加入了一些注释说明,本人并非原创. <html lang="zh…

利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

  介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持. // 这个特性包括两个事件: // 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据(手机所处的角度.方位和朝向等). // 2.deviceMotion:封装了运动传感器的事件,可以获取手机运动状态下的运动加速度等数据. // 使…

HTML5的audio在手机网页上无法自动加载/播放音乐，能否实现该功能？

在IOS中第一次调用play方法播放音频会被阻止,必须得等用户有交互动作,比如touchstart,click后才能正常调用,在微信中可以通过监听WeixinJSBridgeReady事件来提前播放一个超级短的无声音文件,之后替换src,这样再调用play方法就可以了. 代码如下: $(document).one('WeixinJSBridgeReady', function () { var audio = document.getElementById("audio"); audi…

[html5+java]文件异步读取及上传核心代码

html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3.java端接受 核心代码: 1.拖拽代码段: <div id="dropzone"> <div>Drag & drop your file here...</div> <div id='showFile'></div>…

HTML5移动端手机网站开发流程

基本上开发手机网站,可大致分为两大类.一类是用框架开发手机网站.一类是自己手写手机网站. 一.框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap).jQuery mobile..当然可能还有一些移动端开发的框架,这些我就没具体去研究过. 为什么说BootStrap是目前前端最火热的开发框架呢? 因为bootstrap自带响应式布局(栅格系统),而且能做到移动设备优先的原则. 运用bootstrap来开发网站有什么好处呢? 1.不懂设计也可以做网站 就算不懂…

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至server进行保存,而且将图片的路径地址存进数据库. 大家能够点此链接查看前台本地压缩上传的处理: HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一) ok,废话不多说了.直接贴代码吧. 1.前台js代码: $.ajax({ async:false…

DEDEcms手机网站添加详情内页上一页/下一页的翻页功能

修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function GetPreNext($gtype='') { $rs = ''; if(count($this->PreNext)<2) { $aid = $this->ArcID; $preR = $this->dsql->GetOne("Select id From `#@__ar…

如何在电脑上测试手机网站（补充）和phonegap

颜海镜 介绍了专业人士精准测试手机网站的经验 http://www.cnblogs.com/yanhaijing/p/3557261.html, 因为太专业了,稍显复杂和琐碎,这里我介绍下我一直关注的的 inter XDK 去年的 xdk 是浏览器插件,今年用nodejs重写了,可见前端会nodejs ,想做啥就做啥 下载地址    http://xdk-software.intel.com/index.html 安装完后界面是这样的 创建项目.导入项目.根据模板创建项目,有很多好玩的东西,通过…

[转] -- html5手机网站自适应需要加的meta标签

webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/> 下面是对于这个标签的具体说明: viewport 语法介绍: <meta name…

h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信息,表示为一系列本地坐标系的旋角.devicemotion:提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标.其还提供了设备在坐标系中的自转速率.若可行的话,事件应该提供设备重心处的加速信息.compassneedscalibration:用于通知Web站点使用罗盘信息校准上述事件. 5…