HTML5一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件： 1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手...
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态. 在线演示Demo: Fullscreen API Example (在此Demo中，可以Launch ,Hide ,以及Dump显示相关属性,可以通过chrome的控制台查看日志信息.) 启动全屏模式 全屏API requestFullscreen方法在一些老的浏览器里面依然使用带...
一，开篇分析 好了，废话不多说，直接进入今天的主题，今天主要讲的是“History API”及在单页应用中的作用，并且会引入一个实际的例子做为讲解的原型范例，先来看看“History API”：为了提高Web页面的响应速度，越来越多的开发者开始采用单页面结构（single-page application）的解决方案。所谓的单页面结构就是指多个页面间切换时，不刷新当前整个页面，更新页面展示数据，并且相应地改变地址栏中的url，以使用户可以分享这个ur...
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(#p1).click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Ca...
上图便是这个音频播放器的UI界面图，里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成，看上去有难度的地方就只有CD和打碟器的制作了，在歌曲播放时CD和打碟器都是具有动画交互效果的，这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~ 因为这一期的教程主要是为了展示Html5新增的标签和audio元素的Dom API的使用，所以播放器UI的绘制在...
直接奉上示例代码，废话就不多说了。 代码如下: HTML Audio API HTML5 Audio API HTML5 Audio API demo by http://github.com/LearnShare" target="_blank">LearnShare. Last update @2013-04-23 20:40:00 + add info table update @2013-04-22 14:54:00 + add DOM events update @2013-04-22 12:47:00 + add getCurrentSrc button View code on http://github.com/LearnShare/LearnShare.github.io/tre...
介绍之前做两个声明： 以下代码可以直接运行，当然你别忘了引用jQuery才行。代码如下:// DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。// 这个特性包括两个事件：// 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据（手机所处的角度、方位和朝向等）。// 2、deviceMotion：封装了运动传感器的事件，可以获取手机运动状态下的运动加速度等数据。// ...
在现在的前端页面中，尤其是移动端，经常会需要将或者是模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。“回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。 代码如下:... 回复主题... 实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮在最下方为例（悬浮同理），当页面滑到最下方的时候，由于是fixed定位，脱离了正常文档流，导致...
元素HTML元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。 元素使用注意事项：不要使用元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。 使用例子：XML/HTML Co...
首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多 在html5中，全屏方法可以适用于很多html 元素，不仅仅是video代码如下:全屏问题*{ padding: 0px; margin: 0px;} body div.videobox{ width: 400px; height: 320px; margin: 100px auto; background-color:#000;} body div.videobox video.video{width: 100%; height: 100%;} :-webkit-full-screen { } :-moz-full-screen { } :...
HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多，但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度。现在完全不担心浏览器支持是不现实的，还需要时间，因此当我们决定要采用 HTML5 技术开发 Web 应用的时候，我们需要对浏览器所支持的特性进行检...
今天给大家分享一款非常漂亮的纯html5实现的时钟。整个界面都由html5绘制而成。一起看下效果图：实现的代码。htm代码：XML/HTML Code复制内容到剪贴板div class="container"> svg width="600" height="600" class='svg-element'> filter id="f4" x="-50%" y="-20%" width="200%" height="140%"> feOffset result="offOut" in="SourceAlpha" dx="0" dy="25" /> feGaussianBlur result="blurOut"...
一、什么是响应式布局?响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。...
请使用支持HTML5的浏览器查看本特效 代码如下:HTML5有特色的进度条body {background: #111;color:White;}a{color:White;}canvas {background: #111;border: 1px solid #171717;display: block;left: 50%;margin: -51px 0 0 -201px;position: absolute;top: 50%;}/*==============================================*//* Light Loader/*==================================================*/var lightLoader = function (c, cw, ch)...
几天前同事给我看了一个特效，是一个拼图游戏，不同的是，拼图里的是动画。他让我看下做个DEMO，于是就自己整了一会，也确实不难。用canvas很容易做。所以这篇博文不适合高手看。。。。就是随便写来玩玩的。效果图： 至少我刚看到这个的时候觉得挺新颖的，所以才会想到做出来玩玩，觉得楼主out的哥们请轻喷不多说，先上DEMO：视频拼图 （或许要等一会才能看到效果，我是直接在w3school那里搞了个视频链接过来的，拖动什么的都做的...