Day: May 19, 2015

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

HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。 查看演示 下载源码 DeviceOrientation包括两个事件: 1、deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。 2、deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 HTML 页面上有一个div#hand,用来放置一个手摇的图片,d… Read More

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

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

生成二维码的 jQuery 插件:jquery.qrcode.js

jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件,它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用,并且压缩之后大小小于 4K。 jquery.qrcode.js 使用 1. 加载 jQuery 和 jquery.qrcode.js: <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> <script type="… Read More

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

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

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

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

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

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