Day: May 19, 2015

HTML5手机重力与方向感应的应用——摇一摇效果

HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。 查看演示 下载源码 DeviceOrientation包括两个事件: 1、deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。 2、deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 HTML 页面上有一个div#hand,用来放置一个手摇的图片,div#result用来展示摇动后的结果信息。 <div id="hand" class="hand%20hand-animate"></div> <div id="result"></div> 我们可以使用CSS3来增强页面效果,使用-webkit-animation动画效果实现手摇图片的动态效果,具体请下载源代码查看。 Javascript “摇一摇”这个动作即“一定时间内设备了一定距离”,因此通过devicemotion监听设备晃动获取到的x, y, z轴的… Read More

HTML5+PHP+jQuery手机摇一摇换衣

在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果。手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。 查看演示 下载源码 注意,这是一篇WEB知识综合应用的文章,阅读本文前提是,您需要有HTML5,jQuery,PHP,MySQL等相关方面的基础知识。 HTML 我页面中默认展示产品信息(某品牌连衣裙产品图片和文字说明),当然实际应用中可以从数据库中获取产品信息。 <div id="pro" rel="1"> <p>使劲晃动您的手机</p> <img src="images/z1.jpg" width="300" height="300"> <p>灰色</p> </div> 然后在页面中加载jQuery库文件,同时我们继续沿用上一篇文:《HTML5手机重力与方向感应的应用——摇一摇效果》中用到的侦听手机摇晃的代码:shake.js。 <script… Read More

在web页面上快速生成二维码的两种实用方法 (javascript/php)

二维码是桌面和移动端快速分享的高效手段之一,这里介绍两个不错的快速开发二维码的方法,和大家分享一下~~ 方法1:使用新浪提供的服务 这种方式简单快速,在服务端生成一个二维码的图片,兼容性比较好,你无需自己处理任何相关二维码的生成,只需要提供一端文字或者url即可,方法如下: <img src="http://qrcoder.sinaapp.com?t=http://www.gbtags.com"> 生成效果如下: 大家扫一扫就可以访问极客标签主站了~~ 方法2: 使用jQuery插件qrcode QRcode是一个jQuery插件,可以使用javascript快速帮助你生成相关的二维码  相关代码如下: var qrcode = new QRCode("qrcode", { text:… Read More

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 – photobooth.js

在线演示  下载 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。 在今天的这篇文章中,我们将介绍来自Wolfram Hempel开发的Photobooth.js,使用这个类库可以帮助你快速的调用摄像头功能,你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照,你可以使用这个功能来实现用户的大头照拍摄,是不是非常不错? 主要特性: 对比度设置 颜色设置 亮度设置 色调设置 拍照按钮 支持最新的chrome, firefox, opera等浏览器 支持jQuery插件方式和javascript代码方式 使用Chrome打开在线演示后,请确认允许浏览器调用你的摄像头,如下: Javascript代码: $('#webcam').photobooth().on("image",function(… Read More

jquery:使用 SoundManager 2 创建简单的网页音频播放器

官网:http://www.schillmania.com/projects/soundmanager2/ HTML5 标准中加入了两个非常强大的标签 audio 和 video ,让我们在网页中嵌入视频和音频变得非常方便,但是不幸的是目前用户所使用的有很大一部分浏览器都是老版本的,并不支持这两个标签,这使前端开发者们很困扰,这里介绍一款相对来讲支持浏览器比较多的网页音频播放器 —— SoundManager 2。 以下是 SoundManager 2 支持的浏览器版本,你没看错,它甚至支持 IE5: Firefox (all versions),… Read More

精选9个不错的HTML5播放器

HTML5中,除了其他强大的功能外,同时还增加了audio标签,利用audio标签就可以播放音乐。下面是9个不错的HTML5音乐播放器。 Media Element MediaElement音频视频播放器是纯HTML5和CSS编写的。同时为很多不同的开源系统提供插件,如WordPress,Drupal,Joomla等 网址:http://mediaelementjs.com/   Scott Andrew’s HTML5 audio player 这个播放器是非常简约,但效果很好。 网址:http://www.scottandrew.com/pub/html5audioplayer/   Speakker Speakker是非常简单的播放器,同时据有高强的定制性:无限灵活的尺寸,颜色等… Speakker是跨浏览器兼容的,在老旧浏览器上将使用Flash播放器,同时还有两个不错的主题。 网址: … Read More