[device-orientation] 使用手机设备的方向感应实现图片选择
<div class="main">
<h2>Device Orientation</h2>
<table>
<tbody><tr>
<td>Event Supported</td>
<td id="doEvent">DeviceOrientation</td>
</tr>
<tr>
<td>Tilt Left/Right [gamma]</td>
<td id="doTiltLR"></td>
</tr>
<tr>
<td>Tilt Front/Back [beta]</td>
<td id="doTiltFB"></td>
</tr>
<tr>
<td>Direction [alpha]</td>
<td id="doDirection"></td>
</tr>
</tbody></table>
</div> <div class="container" style="-webkit-perspective: 300; perspective: 300;">
<img src="zhenge.jpg" id="imgLogo" class="logo">
</div> <script type="text/javascript">
init();
var count = 0; function init() {
if (window.DeviceOrientationEvent) {
document.getElementById("doEvent").innerHTML = "DeviceOrientation";
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
// gamma is the left-to-right tilt in degrees, where right is positive
var tiltLR = eventData.gamma; // beta is the front-to-back tilt in degrees, where front is positive
var tiltFB = eventData.beta; // alpha is the compass direction the device is facing in degrees
var dir = eventData.alpha // call our orientation event handler
deviceOrientationHandler(tiltLR, tiltFB, dir);
}, false);
} else {
document.getElementById("doEvent").innerHTML = "Not supported on your device or browser. Sorry."
}
} function deviceOrientationHandler(tiltLR, tiltFB, dir) {
document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
document.getElementById("doDirection").innerHTML = Math.round(dir); // Apply the transform to the image
var logo = document.getElementById("imgLogo");
logo.style.webkitTransform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
logo.style.transform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
} // Some other fun rotations to try...
//var rotation = "rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
//var rotation = "rotate("+ tiltLR +"deg) rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
</script>
测试手机:
GT - I9300 , 系统版本 3.03 , 微信下面正常 , UC V10.8.5.689 可以
iPhone 4s ,ios 版本 7.1.2 , safari浏览器可以, 微信可以
[device-orientation] 使用手机设备的方向感应实现图片选择的更多相关文章
- 【HTML5 】手机重力与方向感应的应用——摇一摇效果
http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...
- javascript检查移动设备是否支持重力方向感应
javascript如何检查移动设备,如手机平台是否支持重力或者方向感应. 可以使用html5提供的重力和方向感应接口来判断. html5 中针对高端手机提供了重力感应和重力加速的接口,开发可以利用这 ...
- 获取Android设备的方向,Sensor和SensorManager实现手机旋转角度
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1009/425.html 带有g-sensor的Android设备上可通过API ...
- Android Device Orientation
最近在处理相机拍照的方向问题,在Android Device的Orientation问题上有了些疑问,就顺便写个Demo了解下Android Device Orientation究竟是怎么个判断. A ...
- 配置Xcode的Device Orientation、AppIcon、LaunchImage
以下图片指出的 TARGETS→General 面板的信息. 下面我们讲讲根据 APP 需求配置我们的Xcode: 1.设置 Device Orientation,指定 APP 支持设备的方向 ,我们 ...
- iOS设备的重力感应
重力感应是每台iOS设备都具备的功能,所以在应用用好重力感应会有意想不到的效果 1.添加CoreMotion框架 2.在需要使用重力感应的类中添加头文件 #import <CoreMotion/ ...
- PHP简单判断手机设备的方法
本文实例讲述了PHP简单判断手机设备的方法.分享给大家供大家参考,具体如下: 现在移动互联网越来越发到,很多的网站都普及了手机端浏览,为了更好的让网页在手机端显示,我们都选择了使用CSS媒体查询制作响 ...
- ios获取设备手持方向——电子罗盘
转:http://book.51cto.com/art/201411/457105.htm 2014-11-15 19:07 张亚飞/崔巍 中国铁道出版社 字号:T | T 综合评级: 想读() 在 ...
- [中英对照]Device Drivers in User Space: A Case for Network Device Driver | 用户态设备驱动: 以网卡驱动为例
前文初步介绍了Linux用户态设备驱动,本文将介绍一个典型的案例.Again, 如对Linux用户态设备驱动程序开发感兴趣,请阅读本文,否则请飘过. Device Drivers in User Sp ...
随机推荐
- ubuntu12.04下安装Apache+PHP+MySQL
一.Apache1.安装apache2: sudo apt-get install apache2 2.重启apache2: sudo /etc/init.d/apache2 restart 3.在浏 ...
- 201621123008 《Java 程序设计》 第九周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题集题目) 1.1 实验总结.并回答:列举至 ...
- 网页定时器setTimeout( )
不斷重複執行的 setTimeout( ) setTimeout( ) 預設只是執行一次, 但我們可以使用一個循環方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setT ...
- CURLOPT_RETURNTRANSFER
curl_setopt($ch,CURLOPT_RETURNTRANSFER,);//设置返回值不直接输出,例如返回xml格式,会将xml原样输出
- Laravel 5.5 + Vue 开发单页应用
上次我用 laravel5.3 + Vue 开发了一个简单的单页应用,这次我打算将其升级到 laravel5.5,在升级的过程中,做一下记录,其源码放在 github 上面,源码地址 开发环境 软 ...
- Netty 源码(二)NioEventLoop 之 Channel 注册
Netty 源码(二)NioEventLoop 之 Channel 注册 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一 ...
- Linux配置nodejs
http://my.oschina.net/blogshi/blog/260953 首先去官网下载代码,这里一定要注意安装分两种,一种是Source Code源码,一种是编译后的文件.我就是按照网上源 ...
- Mockplus3.5.0.1新增标注功能
Mockplus3.5.0.1版本中,新增了标注功能.多种标注模式,智能生成,随时查看.原型设计效率更高. Mockplus的标注功能有以下四种模式: 1.无选中标注 在未选中任何组件时,按住Ctrl ...
- 数位dp小结
数位dp其实就是一种用来求区间[l, r]满足条件的数的个数.数位是指:个十百千万,而在这里的dp其实相当于暴力枚举每一位数. 我们通过把l, r的每位数分解出来,然后分别求r里满足条件的数有多少,l ...
- List<T>中,Remove和RemoveAt区别
Remove删除的是匹配的第一项.比如你的list里面有2个相同的项.那么就删除第一个.后面的不删除,找不到元素和删除失败都返回falseRemoveAt是删除索引下的项