这里必须解释一下，这个“激活”，指的是这个标签是否正被用户浏览，或者说是否为当前标签。 那么，这个 API 究竟有些什么用途呢？通常，很多传统的页面在用户没有激活它的时候，它还会继续工作，例如，当用户正在浏览新闻门户，而他之前打开的 NBA 球赛页面会继续刷新获取最新结果，视频网站会继续占用带宽加载资源，于是，如果这类不必要的工作太多了，就会造成很多的资源浪费。因此，这货相当有用： 1.Web 程序每隔一段时间会自...
效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。 实现代码：代码如下:HTML5 Demo#apDiv1 {position:absolute;width:120px;height:300px;z-index:1;left: 840px;top: 80px;} Your browser does not support the canvas element. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.translate(400,300); ctx.clearRect(-400,-300,800,600);ctx.strokeSty...
然而，也有很多小的非常好的特征；其中一个就是新添加的download属性。download属性能让我们指定浏览器下载时采用新的文件名称，也就是在客户端重命名下载文件。而不是链接上原始的文件名称。实际上download属性更合适的名称是downloadName。 HTML代码 把download属性放到A链接上…. 代码如下:下载支出费用表 当用户点击这个链接，download属性值里的新名称就会显示到弹出的下载框里。这样你保存的文件名称是“预算表.pdf”。而且，...
特别的，有一个新的属性，它能让我们控制多个元素的属性，就是：scoped。style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效，具体说，就是存放这段style样式的元素的子元素生效，跟平常的样式不一样的唯一地方就是新加了一个scoped属性：代码如下: /* styles go here */ 具有scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高，所以，最好避免使用inline样式，下面是将几种样式...
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。 HTML代码 下面的代码里我写了一部分注释，请阅读：代码如下:理想情况下我们应该先判断你的设备上是否有摄像头或相机，但简单...
一、 Data URI scheme 简介 Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。或许你已经...
HTML5图片预览需要用到两种方法1.URL 2.FileReader直接上代码 代码如下: html5 图片上传预览 #preview { width: 300px; height: 300px; overflow: hidden; } #preview img { width: 100%; height: 100%; } function preview1(file) { var img = new Image(), url = img.src = URL.createObj...
最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋 代码如下: Document .box > canvas { position: absolute; } function getRect(obj) { var x1 = obj.offsetLeft; var y1 = obj.offsetTop; var x2 = x1+obj.offsetWidth; var y2 = y1+obj.offsetHeight; return { x1: x1, y1: y1, x2: x2, y2: y2 }; } f...
今天要脚本之家的小编要再给大家带来一款html5和css3打造的创意404页面。一起看下效果图吧：实现的代码html代码：代码如下: c0-11.4-9.2-20.6-20.6-20.6v-0.2H633c-11.4,0-20.6-6.7-20.6-18.1c0-11.4,9.2-19.3,20.6-19.3h70.4l2-0.2c7.3-3.1,12.5-11,12.5-19.5<br /> c0-8.5-4.2-16.7-11.4-19.2l-2.5-0.3h-11.3c-11.9,0-21.6-8.9-21.6-19.9c0-11,9.7-19.9,21.6-19.9h15.8l1.4-0.3<br /> c8.6-2.5,14.8-10.1,14.8-19.5c0-11...
html5桌面通知(Web Notifications)对于需要实现在新消息入线时，有桌面通知效果的情况下非常有用，在此简单介绍一下这个html5的新属性。 这里有个不错的demo：html5 web notification demo 从上面这个demo中 我们就可以获取所需要的基本核心代码，如下： 代码如下: var Notification = window.Notification || window.mozNotification || window.webkitNotification; Notification.requestPermission(function (permission)...
本文实例讲述了html5获取地理定位的方法，分享给大家供大家参考。具体方法如下： html5 获取坐标代码如下： 代码如下: test1.html 点击这个按钮，获得您的坐标： 试一下 var x=document.getElementById("demo"); function getLocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); ...
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法，运行该实例可以看到很棒的下雪效果。如下图所示：主要代码如下： 代码如下:漫天飞雪* {margin: 0; padding: 0;} body { /*You can use any kind of background here.*/ background: #6b92b9;}canvas { display: block;}window.onload = function(){ //canvas init var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ...
本文以实例代码演示说明了HTML5新增的表单元素和属性，演示代码中包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel 类型文本框、url 类型文本框以及还有日期、时间类型的 input元素等等。示例代码如下： 代码如下: HTML5 移动Web开发指南 h1, h2, h3, h4, h5, h6 { text-align: center; ...
下面的是在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版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下： 代码运行效果如下图所示：canvasElement.js代码如下： 代码如下:define(canvasElement, [ ../multi_upload/core ], function(S) {var Canvas = window.Canvas || {};(function () { Canvas.Element = function() {}; Canvas.Element.prototype.fillBackground = true; Canvas.Element.prototype.showcorners = false; Canva...