首页

关于

绝对应当收藏的10个实用HTML5代码片段

绝对应当收藏的10个实用HTML5代码片段

HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢!

HTML5的最简单模板

如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

标签: html, html5, 代码片段

阅读更多

创建平滑的HTML5动画

创建平滑的HTML5动画

现代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。

创建平滑的HTML5动画

现代移动 操作系统将用户接口动画化,并已达到了电脑端交互的标准--精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表, 使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。

接 受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率--真是绝望啊!

改变

2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。

CSS3动画--3D

让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。

CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover…

标签: html, html5, 动画效果, css3动画, css

阅读更多

Backbone.js系列教程二:Backbone.js深入解析之基础要求

Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配 Model/View/Whatever。有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值。我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述。有篇文档专门讲述 Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backbone.js的内容介绍。这些虽然远远不够,但最起码,能换个角度带大家了解Backbone的组成部分与功能。

在这套Backbone.js解构系列教程中,我们将从代码层面验证Backbone库的功能。

相关阅读: Backbone.js系列一 - Backbone.js初探

具体而言,在这套教程的前一部分中我们将探讨学习Backbone的基础,介绍单页面应用程序(SPAs)所需一些关键的细节,以便能更好的掌握Backbone的组成与用途。在对SPAs有一定基础之后,我们将系统深入到Backbone代码部分各个细节,包括Backbone.Events、创建Backbone对象、Backbone.Router()Backbone.History()Backbone…

标签: backbones.js, html, javascript, 前端框架

阅读更多

Backbone.js系列一 - Backbone.js初探

kbone.js系列一 - Backbone.js初探

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及。其中一种运用广泛的MVC框架就是Backbone.js。

Backbone中的Models(模型)、Views(视图)和Collection(集合)

Backbone.js包含以下几个主要功能:

  1. 创建模型(以及模型集合);
  2. 创建视图;
  3. 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系;
  4. 在模型中使用观察者模式,一旦模型触发任何change事件,所有显示此模型数据的视图接受到该change事件通知,从而自动进行事件重新渲染;
  5. 给DOM处理所依赖的jQuery或Zepto提供支持。

第一部分:模型(Models)

创建模型,首先我们创建一个包含数据的Person对象。

Person = Backbone.Model.extend({
// Person实例的构造函数

标签: backbones.js, html, javascript

阅读更多

极客技术专题【011期】:EasyUI初级教程

极客技术专题【011期】:EasyUI初级教程

技术专题:EasyUI初级教程

分享人:极客标签技术编辑 - html580(请站内关注分享人)

资深Web前端工程师,HTML580创始人,目前就职于广州一间软件公司。多年从事J2EE政务软件的开发,熟悉Extjs、EasyUI、LigerUI等前端框架。

授课时间:2013/09/04(周三)  20:00-21:00

课程演讲稿:EasyUI初级教程

课程类型:公开

专题难度:初级

课程时间:60min

课程大纲:

Easyui是一个基于jquery基础上扩展的UI类库,主要面向WEB后台的UI界面类库。

提供组件包括功能强大的数据网格、树、布局面板、控制面板、选项卡、窗口、消息提示窗口、常用表单组件。

"课程平台"使用帮助:如何使用极客社区"在线课程平台"?

如何进入课程

  • 已报名用户:进入课程日历后底端有工具条提示,可提前进入指定课程
  • 未报名用户:需要等待课程开始时间后,进入课程日历后,点击对应日历项进入课程

标签: html, ui, gb互动技术分享, 初学入门, 免费在线课程, easyui

阅读更多

如何构建下拉滑动式响应导航菜单

如何构建下拉滑动式响应导航菜单

在线演示 在线下载

经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕。

在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在前端,但下降为一个隐藏的菜单,调整后的大小低于600px。同时将出现一个小的下拉菜单,图标会切换打开和关闭命令。

演示及下载源代码

设定文件

顶部区域包含文件的一小部分,我们用来创建效果。我从由谷歌托管的最新 jQuery库中复制了常规样式表,所有自定义JS函数被存储在外部文件命名为menu.js。

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"…

标签: 导航菜单, css3, javascript, 响应式菜单, html, css

阅读更多

前端性能优化:使用Data URI代替图片SRC

前端性能优化:使用Data URI代替图片SRC

提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快,而其中一种减少页面请求的方法就是用 Data URI代替图片的src属性:

<!-- 以前的写法 -->
<img src="/images/logo.png" />

<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH…

标签: 前端性能优化, html, css, web前端最佳实践

阅读更多

前端性能优化:使用事件委托

前端性能优化:使用事件委托

想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为。这个时候, 你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢?这个时候,你在移除添加元素的同时需要处 理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。

事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子:

// 获取元素,添加事件监听
document.querySelector('#parent-list').addEventListener('click', function(e) {
// e.target 是一个被点击的元素!
// 如果它是一个列表元素
if(e.target &&…

标签: 前端性能优化, html, javascript, web前端最佳实践

阅读更多

前端性能优化:尽可能使用CSS动画

前端性能优化:尽可能使用CSS动画

网站设计对美观特性和可配置元素动画的大量需求,使得一些JavaScript类库,如jQuery,MooTools大量的被使用。尽管现在浏览器支持CSS的 transformationkeyframe所 做的动画,现在仍有很多人使用JavaScript制作动画效果,但是实际上使用CSS动画比起JavaScript驱动的动画效率更高。CSS动画同时 需要更少的代码。很多的CSS动画是用GPU处理的,因此动画本身很流畅,当然你可以使用下面这个简单的CSS强制使你的硬件加速:

.myAnimation {
    animation: someAnimation 1s;
    transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}

tansform:transform(0,0,0)在不会影响其他动画的同时将通话送入硬件加速。在不支持CSS动画的情况下(IE8及以下版本的浏览器),你可以引入JavaScript动画逻辑:

<!--[if…

标签: 前端性能优化, html, css3, javascript, web前端最佳实践

阅读更多

前端性能优化:使用Array.prototype.join代替字符串连接

前端性能优化:使用Array.prototype.join代替字符串连接

有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法。在这个系列的第一篇中,我在代码中使用了基本字符连接:

htmlStr += '<li>' + item.text + '</li>';

但是下面这段代码中,我用了优化:

var items = [];

ajaxResult.items.forEach(function(item) {
    // 构建字符串
    items.push('<li>', item.text, '</li>');
});

// 通过innerHTML设置列表内容
document.querySelector('ul').innerHTML = items.join('');

也许你需要花上一点儿时间来看看这个数组是做什么用的,但是所有的用户都从这个优化中受益匪浅。

下一篇,我们将谈谈在前端尽可能使用CSS动画

相关阅读:

标签: 前端性能优化, html, 字符串, javascript, web前端最佳实践

阅读更多

前端性能优化:使用异步加载,延迟加载依赖

前端性能优化:使用异步加载,延迟加载依赖

RequireJS已经迎来了异步加载和AMD格式的巨大浪潮。XMLHttpRequest(该对象可以调用AJAX)使得资源的异步加载变得流行起来,它允许无阻塞资源加载,并且使 onload 启动更快,允许页面内容加载,而不需要刷新页面。

我所用的异步加载器是John Hann的curl。curl加载器是基本的异步加载器,可以被配置,拥有很好的插件。以下是一小段curl的代码:

// 基本使用:  加载一部分AMD格式的模块
curl(['social', 'dom'], function(social, dom) {
dom.setElementContent('.social-container', social.loadWidgets());
});

// 定义一个使用Google Analytics的模块,该模块是非AMD格式的
define(["js!//google-analytics.com/ga.js"],…

标签: 前端性能优化, html, 延迟加载, api, 优化

阅读更多

前端性能优化:网络存储的静态缓存和非必要内容优化

前端性能优化:网络存储的静态缓存和非必要内容优化

上一篇我们介绍了前端性能优化:高频执行事件/方法的防抖,这篇我们将介绍前端性能优化:网络存储的静态缓存和非必要内容优化。

相关阅读:

Web Storage的API曾经是Cookie API一个显著的进步,并且为开发者使用了很多年了。这个API是合理的,更大存储量的,而且是更为健全理智的。一种策略是去使用Session存储来存 储非必要的,更为静态的内容,例如侧边栏的HTML内容,从Ajax加载进来的文章内容,或者一些其他的各种各样的片断,是我们只想请求一次的。

我们可以使用JavaScript编写一段代码,利用Web Storage使这些内容加载更加简单:

define(function() {

var…

标签: web前端特效, html, javascript, api, 优化

阅读更多

前端性能优化:高频执行事件/方法的防抖

上一篇我们说了用InnerHTML和DocumentFragment来减少DOM注入的次数,这次我们说一说如何处理高频事件触发时的优化。

相关阅读:

前端性能优化:高频执行事件/方法的防抖

高频执行事件/方法的防抖

通常,开发人员会在有用户交互参与的地方添加事件,而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时,执行的非常迅速,并且触发很多次。如果你的回调过重,你可能使浏览器死掉。

这就是为什么我们要引入防抖。

防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例:

// 取自 UnderscoreJS 实用框架
function debounce(func, wait,…

标签: 前端性能优化, html, javascript, api, 优化

阅读更多

前端性能优化:DocumentFragments或innerHTML取代复杂的元素注入

我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧,只需要一分钟,就可以优化你现有的代码。

相关阅读:

前端性能优化:DocumentFragments或innerHTML取代复杂的元素注入

使用DocumentFragments或者innerHTML代替复杂的元素注入

DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。

现在假设我们页面中有一个<ul>元素,调用AJAX获取JSON列表,然后使用JavaScript更新元素内容。通常,程序员会这么写:

var…

标签: 前端性能优化, html, javascript, api, 优化

阅读更多

将CSS CLIP属性应用在:扩展覆盖效果

在线演示

我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡。这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面。点击其中一个元素将创建一个切断图片的效果,展示将被宽展开的另一层。

更多相关前端技术内容,请关注极客标签

怎样做?

首先,我们要创建一个项目列表,它将看起来像是装满不同城市名称的盒子:

每 一个箱子将包含一个元素(覆盖层),该元素的位置将被固定。实际上这个元素会铺满整个页面,但我们不会看到它,因为透明度opacity将被设置为0。当 我们点击一个盒子,我们将使用clip:rect()修剪各自的内部固定元素。然后我们将动态展示所有叠加的宽度和高度,做为整个视窗:

单击关闭按钮将反转这个效果,并且使列表项的大小最小化并消失。

那么,让我们从HTML开始吧!

标记:

我 们将为这些盒子使用一个无序列表。每个列表项将会有一个图标类和一个可选的"span"类,将控制盒子的宽度。在里面将添加一些文本和覆盖的层。叠加的部…

标签: jQuery, css, html, 扩展覆盖效果, clip属性

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.