首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

HTML5的仿本地应用移动端UI互动开发框架 – Ionic

Native App Development With HTML5 - Ionic

本地移动应用往往速度更快,更流畅并且拥有更好的用户体验,作为web开发设计人员来说,寻找新的方式和技术来实现类似的效果和UI是我们的重要的责任。

Ionic,是一个前端的框架,帮助你快速的使用HTML5,CSS3,Javascript创建本地效果的移动应用。

使用Ionic不是为了取代PhoneGap或者JS框架,它主要是帮助开发人员创建UI界面和互动。

这个框架使用SASSS和AnguarJS扩展,并且包含其它的组件,例如,按钮,切换,页头/页脚,tab栏及其其它。

拥有完整的文档,包含了完整的教程和例子 ,大家可以方便的了解和学习

网站地址: http://ionicframework.com/
下载地址: https://github.com/driftyco/ionic/

标签: ionic, 前端框架, frameworks, HTML5

阅读更多

支持Lazy loading的图片画廊jQuery插件 - Least.js

支持Lazy loading的图片画廊jQuery插件 - Least.js

在线演示

Least.js是一个jQuery开发的图片画廊,可以用来展示Pininterest风格的图片布局,它将无需的列表项目通过随机方式来加载。如果你点击任何图片的话,并不显示一个更大版本的图片,而是滑动其它的图片,在顶端生成更大的图片,类似Google图片搜索风格。

这个插件使用HTML5/CSS3的特性并且支持响应式的布局。

如何使用

导入类库

JS

<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!--…

标签: 分享, jQuery, CSS3, HTML5, js图片特效

阅读更多

使用HTML5的Canvas画布来剪裁用户头像

使用HTML5的Canvas画布来剪裁用户头像

本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照。

在线调试

例如需要剪裁的图片如下:

webgeek

用来处理大头照的JS代码如下:

var canvas = document.getElementById('myavatar');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
// draw cropped image
var sourceX = 60;
var sourceY = 0;
var sourceWidth = 180;
var sourceHeight = 180;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var…

标签: HTML5, 分享, canvas

阅读更多

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js

在线演示

如果你希望开发一款支持响应式的HTML5播放器的话,AudioPlayer.js是一个不错的选择。它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器,不使用任何embed代码,图片或者flash,完全使用CSS定义界面。压缩后的大小只有4KB。

主要特性

  • 响应式
  • 触摸式
  • 自适应
  • HTML5音频的本地支持
  • 易用性.
  • 无图片
  • 无flash
  • 轻量级,压缩后4KB

如何使用

HTML

    <audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
    </audio>

Javascript

    <script src="jquery.js"></script>

标签: jQuery, 分享, HTML5, HTML5播放器

阅读更多

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

随着HTML5的发展,越来越多的基于HTML5技术的网页开发框架出现,在今天的这篇文章中,我们将介绍iio Engine,它是一款开源的创建HTML5应用的web框架。

整个框架非常的轻量级,只有45kb大小,并且整合了debug系统,并且跨平台支持。

不依赖任何第三方的类库,可以支持Box2D,拥有完整的文档支持。支持快速的开发。

使用这个类库你只需要使用10多行的代码就生成一个tic-tac的游戏,代码如下:

    TicTacToe = function(io){

var grid = io.addObj(new iio.ioGrid(0,0,3,3,120)
.setStrokeStyle('white'));
var xTurn=true;
io.canvas.addEventListener('mousedown', function(event){
var c = grid.getCellAt(io.getEventPosition(event),true);

标签: 分享, HTML5, 前端框架, canvas

阅读更多

帮助你更快的进行网站设计 - Markup Framework

帮助你更快的进行网站设计 - Markup Framework

Markup是一套布局,小组件,UI组件和字体排版样式的框架,可以帮助你快速的执行web相关的设计和开发,相信没有人愿意自己花时间从最基础的层次开发web应用或者是网站,而Markup恰好很方便的帮助你解决了所有的dirty work。

主要的特性

  • 使用最新的HTML5和CSS3标准
  • 最小化标签,页面体积小
  • 搜索引擎友好
  • 纯CSS和HTML,没有JS
  • 没有任何的Hack
  • 结构清晰,语义化
  • 模块化,很方便的混合组件
  • 高效的样式继承,优化了性能
  • 使用命名空间,减少了CSS规则冲突
  • 响应式,支持移动设备
  • 使用media queries
  • 扩展类库,重用界面小组件
  • 整合了开源的字体
  • 完整的文档
  • 快速的代码编写标准

浏览器支持

  • 所有的现代浏览器
  • 使用polyfill可以支持Internet Explorer 7和8.

网站地址:http://www.markupframework.org/

 

在线演示:http://www.markupframework.org/demos/

 

标签: UI, 分享, CSS3, HTML5, 前端框架

阅读更多

HTML5介绍 - HTML5的特长,特性及其相关资源

HTML5介绍 - HTML5的特长,特性及其相关资源

什么是HTML5?

HTML5 是万维网联盟(W3C)推出的最新的超文本标记语言。第一稿出版于2008年,但是直到2011年才真正的发展起来。在2011年的时候,HTML5开始发布,人们逐渐开始使用它,但是相关的浏览器对它的支持仍很贫乏。直到今日,几乎所有主流浏览器(Chrome,Safari,Firefox,Opera,IE)都提供了对 HTML5的支持,现在才是HTML5真正发挥它特性的时候。

HTML5和CSS3目前仍在开发中。W3C计划明年发布一个稳定版本,但是看起来这仍是一个胆大的冒险。从HTML5发布至今,它一直在持续发展中,W3C添加了越来越多令人印象深刻的特性,因此看起来HTML5的开发远远不会结束,当然这并不是一件坏事。

HTML5是1999年首次发布的HTML4.01的继任者。从1999年开发网络开发有了翻天覆地的变化,HTML5的出现是必然的。新出的标记语言建立在预留标准上:

  • 新特性基于HTML,CSS,DOM和JavaScript
  • 对外部的插件(如Flash)的需求需要减少
  • 错误处理要比过去的版本更加简单
  • 脚本被更多的标记所替代
  • HTML5特性必须与设备无关
  • 开发过程必须对大众是可视的

HTML5的新特性?

HTML5…

标签: CSS3, HTML5

阅读更多

跳跃的圆形幻灯片

跳跃的圆形幻灯片

在线演示

今天我想要与你分享一个即简单又有趣的圆形幻灯片。这是一个实验性的概念,此想法是在一个特定的角度点击圆形图片,就会翻转到另一个圆形图片。分为 三种不同的可能性:顶部、中部、底部。例如,当单击右上部分的图像时,将在相关角度翻转,使它看起来好像我们压到的那部分翻了过去,显示出它背面的图像。

跳跃的圆形幻灯片

结构:

<div id="fc-slideshow" class="fc-slideshow">
<ul class="fc-slides">
<li><img src="images/1.jpg" /><h3>Hot</h3></li>
<li><img src="images/2.jpg" /><h3>Cold</h3></li>

标签: CSS3, HTML5, jQuery

阅读更多

现代浏览器的web音频javascript类库 - Howler.js

howlerjs

在线演示

浏览器这个玩意儿并不是个新鲜事,但是随着HTML5的发展激起了浏览器技术的巨大发展。但是浏览器上对于音频控制技术来说仍旧非常的落伍。庆幸的是 Google积极的开发和创建了web audio API,这使得基于浏览器的音频控制更加的简单并且直观。但是唯一的问题是浏览器兼容性支持问题!

今天我们将要介绍一款基于web audio API的javascript类库 - howler.js,能够帮助你快速简单全面的控制音频。最早这款JS类库是为web游戏设计开发的。它使用Google的web audio API,如果浏览器不支持的话,会自动fallback到HTML audio。你可以方便的将声音控制整合到你开发的网站,应用或者web游戏中去。如果你需要兼容老版本浏览器需要使用一些fallback,可以参考这篇文章:

跨浏览器的HTML5 Audio解决方案- Audio5js

主要特性

  • 缺省使用Web Audio API
  • 可以方便的fallback回HTML…

标签: howlerjs, javascript, HTML5, audio

阅读更多

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

在线演示

大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下:

#nav{  padding: 10px  ... }
#header{  padding: 10px  ... }
#footer{  padding: 10px  ... }

定义完之后呢,我们使用div标签来组织页面结构,如下:

<div id="header"></div>
<div id="nav"></div> 
<div id="footer"></div>

这样的代码让我们创建了很多的非样式的CSS定义,是的代码结构复杂并且不直观易懂。

在新的HTML5标准中,我们定义了一系列的标签,帮助你更语义化的定义页面层次和逻辑,你不需要自己定义相关的DIV,HTML5提供了现成的标签来完成上述的结构化定义,如下:

<header></header>
<nav></nav>
<footer></footer>

使用以上的标签,你只需要在css文件中定义相关的真正的样式信息即可。 

在今天的这篇文章中,我们将介绍相关的基本HTML5标签Header,nav和footer。

header标签

在新的标准中header标签定义如下:

"A…

标签: HTML5, header, nav, footer, html5标签, 响应式

阅读更多

高效HTML5代码开发最佳实践

HTML5已经快速的成为新一代的web规范和趋势,作为一个web开发人员来说你绝对有必要了解一下如何使用HTML5来编写网站。在今天这篇文章中,我们收集了一套能够帮助你高效使用HTML5开发的最佳实践,希望能够对于大家开发HTML5网站有帮助!如果你有更多的建议和想法,请给我们留言!

使用在线生成器

如果你的所有web代码都是手写输入的话,我个人非常佩服,但是如果你想有效的提高HTML5代码生成速度的话,使用模板,或者使用在线代码生成工具绝对是一个非常理智的选择。这里有很多的HTML5模板和在线工具你可以使用,比如:

以上俩个生成器拥有更多的选项可供你选择。

使用Cheat Sheet

cheet sheet

随着HTML5的变化和内容添加,你会觉得记住所有的不同特性非常困难,所以你需要cheat sheet来帮助你关注各种标签变化。

你可以在这里下载完整的cheat…

标签: HTML5, HTML5编码实践, HTML5高效编码

阅读更多

分享一个CSS3的网格系统架构 - ResponsiveAeon

分享一个CSS3的网格系统架构 - ResponsiveAeon

在线演示  本地下载

曾经介绍过其它类型的CSS3网格系统,今天我们介绍一款能够帮助你快速创建基于HTML5/CSS3的响应式布局框架 - ResponsiveAeon

它拥有一个宽度为1104px并且基于12个列的网格框架系统,提供了一个非常方便的方式使用,只需要使用3个基础class来实现。

整个框架使用#mediaquery实现并且能在任何尺寸的设备上运行。

除了网格系统,这里还提供字体,列表,表,按钮和表单。

下载包包含了IE兼容的javascript文件,modal box并且提供了PSD/AI/PNG文件。

标签: css3网格系统, ResponsiveAeon, CSS3, HTML5, Responsive

阅读更多

分享一个超炫HTML5开发的jQuery进度条插件 - percentageloader

分享一个超炫HTML5开发的jQuery进度条插件 - percentageloader 

在线演示  本地下载 

今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader。这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ,这个插件使用快捷简单,可以非常好的应用到现代浏览器中。插件使用了HTML5的画布来生成图形界面,压缩版本只有10kb大小,并且使用矢量Vector而非图片来生成,可以很方便的生成不同大小的图形。开源软件,大家可以方便自由的使用。

主要特性

  • jQuery1.4+
  • 支持浏览器:Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
  • 提供各种控制选项
  • 使用简单方便,压缩文件非常小, 10kb 
  • 无损失的支持各种大小尺寸的图形

如何使用

倒入相关类库及其CSS:

<script type="text/javascript"…

标签: HTML5, jQuery进度条, jQuery进度条插件, percentageloader

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐