WebRTC可能是明年最受关注的HTML5标准了，Mozilla为此开发了一套帮助你控制硬件的API，例如，摄像头，麦克风，或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。 在今天的这篇文章中，我们将介绍来自Wolfram Hempel开发的Photobooth.js，使用这个类库可以帮助你快速的调用摄像头功能，你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照，你可以使用这个功能来实现用户的大头照拍摄，是不是非常不错？ ...
HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石，至今还很少人知道它的价值。 你可能已经知道了那古老而又闻名的图片预加载功能，链接预取功能就是将此概念由图片扩展到了网页内容（不需要任何AJAX代码）。 它是这样工作的：在页面上添加一个像这样的链接： 代码如下: 这样，当你的机器空闲时，浏览器就会自动的在后台把page2.html下载下来。 当用户最终点击了page2.html的链接时，浏览器会从缓存里把这个页面取出来...
本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。 1.创建拖拽对象 我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。 系统默认值是auto，但auto情况下浏览器...
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下列方法： getCurrentPosition(callback,errorCallback,options)：获取当前位置； watchPosition(callback,error,options)：开始监控当前位置； clearWatch(id)：停止监控当前位置。 note：下面例子使用的浏览器是chrome，使用其他浏览器我不能保证运行结果和例子显示的结果一致。 1.获取当前位置 我们将使用getC...
先上代码，写的jsp页面，后台是tomcat服务器，所以页面里有一些java的代码，如果后台用其他语言可以无视： 代码如下: pageEncoding="UTF-8"%> 上传、下载文件 #filedrag { display: none; font-weight: bold; text-align: center; padding: 1em 0; margin: 1em 0; color: #555; border: 2px dashed #555; border-radius: 7px; cursor: default; } #filedrag.hover { color: #f00; border-color: #f00; border-style: solid; ...
只修改了2个地方： ，返回的速度改成了慢慢回去。（原来是一闪而返回） ，返回顶部图标出现的时机改成了只要不在顶部就显示出来。（原来是向下滚动500px后才显示） 注意：JS务必要写在 Html之后； HTML 代码如下: Javascript代码 代码如下: $(function(){ var d_top=$('#d-top'); document.onscroll=function(){ var scrTop=(document.body.scrollTop||document.documentElement.scrollTop); if(scrTop>500){ if(scrTop>0){ d...
1、邮箱的自动验证 只需要type=“email” 2、日期的验证（年月日）：type="date" 3、时间的验证（格式：00:00）：type="time" 4、数字的验证 (可以向上加 向下减)type="number" 5、月份（--年--月）type="month" 6、周（--年--周）type="week" 7、range(范围0-100) type="range" 8、search type="search" 9、颜色的颜色大全：type="color" 10、url验证 (必须前面有http://---) type="url" 代码如下: url: 用户名： html...
1、 视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia）。 代码如下:<videoidvideoid=”video”autoplay=”"> varvideo_element=document.getElementById(‘video’); if(navigator.getUserMedia){//operashoul...
一、HTML5 Notification 简介HTML5 Notification ，即桌面通知。目前浏览器依然是一个严格的沙盒工作模式，这种模式把浏览器和桌面的通信隔离开。Notification可以跨越沙盒能够让浏览器即使是最小化状态也能将消息通知给用户。二、桌面提醒API代码如下:window.webkitNotifications该API有3个方法：代码如下:requestPermission 请求桌面通知checkPermission 检查桌面通知许可（PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED =...
下面的是在ie9下面实现的预览，跟ie8还是不一样的，不过我记得貌似ie8好像也是利用了fiter的功能，因为项目只要求在ie9以上，所以就没有写出ie8的啦 代码如下: Document #kk{ width:400px; height:400px; overflow: hidden; } #preview_wrapper{ width:300px; height:300px; background-color:#CCC; overflow: hidden; } #preview_fake{ /* 该对象用于在IE下显示预览图片 */ filter:progid:DXImageTransform.Microsoft.Alph...
HTML5一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件： 1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手...
介绍之前做两个声明： 以下代码可以直接运行，当然你别忘了引用jQuery才行。代码如下:// DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。// 这个特性包括两个事件：// 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据（手机所处的角度、方位和朝向等）。// 2、deviceMotion：封装了运动传感器的事件，可以获取手机运动状态下的运动加速度等数据。// ...
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。 源码下载：点此下载 如何使用HTML5地理位置定位功能 定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏...
在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。 而通过DeviceMotion对设备运动状态的判断，则可以帮助我们在网页上就实现“摇一摇”的交互效果。 运动事件监听 代码如下:if (window.DeviceMotionEvent) { window.addEventListener(devicemotion, deviceMotionHandler, fal...
你我都知道在HTML5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中，鼠标滚轮并不仅仅就只能上下滑动网页，实际上你还可以依靠这个完成更多的功能，比如视野平面的放大与缩小。 看看实际演示效果 大部分浏览器都是支持鼠标滚轮事件的，所以你可以先订阅鼠标滚轮事件的方法，每当事件被触发时，你能获取一个名为 wheelDelta 的属性，它代表刚才鼠标滚轮改变的大小，其中正值表示滚轮往下滑动，负值表示滚轮...