愚人码头 – WEB前端开发- 专注前端开发，关注用户体验

Blog 存档

50 New jQuery Plugins For Web Developers

时间：2012年02月04日作者：愚人码头查看次数:76 views评论次数：0

转载自：http://www.splashnology.com/article/50-new-jquery-plugins-for-web-developers/4141/

In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that allow web developers to enhance their projects. And to make your task simpler, in order you could just visit our site and choose some of these useful plugins, we’ve picked the best and the newest jQuery pluginsand listed them below.

Textualizer.js

A jQuery plug-in which transitions through blurbs of text, animating each character.

Download

Impress.js

Impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Download

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. 继续阅读：50 New jQuery Plugins For Web Developers»

标签：JavaScript,jquery,plugins分类：jQuery, 开发资源

Javascript 中的 call 和 apply

时间：2012年02月01日作者：愚人码头查看次数:561 views评论次数：1

JavaScript 中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。简单的说就是改变函数执行的上下文，这是最基本的用法。两个方法基本区别在于传参不同。

call(obj,arg1,arg2,arg3);call第一个参数传对象，可以是null。参数以逗号分开进行传值，参数可以是任何类型。
apply(obj,[arg1,arg2,arg3]);apply第一个参数传对象，参数可以是数组或者arguments 对象。

这两个方法通常被用来类的继承和回调函数：

作用一、类的继承：

先来看这个例子：


function Person(name,age){

this.name = name;

this.age=age;

this.alertName = function(){

alert(this.name);

}

this.alertAge = function(){

alert(this.age);

}

}

function webDever(name,age,sex){

Person.call(this,name,age);

this.sex=sex;

this.alertSex = function(){

alert(this.sex);

}

}

var test= new webDever("愚人码头",28,"男");

test.alertName();//愚人码头

test.alertAge();//28

test.alertSex();//男

这样 webDever类就继承Person类，Person.call(this,name,age) 的意思就是使用 Person构造函数（也是函数）在this对象下执行，那么 webDever就有了Person的所有属性和方法，test对象就能够直接调用Person的方法以及属性了; 09年的理解解非常粗浅，呵呵。http://www.css88.com/archives/1692

作用二、回调函数：

call 和 apply在回调行数中也非常有用，很多时候我们在开发过程中需要对改变回调函数的执行上下文，最常用的比如ajax或者定时什么的，一般情况下，Ajax都是全局的，也就是window对象下的，来看这个例子：


function Album(id, title, owner_id) {

this.id = id;

this.name = title;

this.owner_id = owner_id;

};

Album.prototype.get_owner = function (callback) {

var self = this;

$.get('/owners/' + this.owner_id, function (data) {

callback && callback.call(self, data.name);

});

};

var album = new Album(1, '生活', 2);

album.get_owner(function (owner) {

alert('The album' + this.name + ' belongs to ' + owner);

});

这里


album.get_owner(function (owner) {

alert('The album' + this.name + ' belongs to ' + owner);

});

中的 this.name就能直接取到album对象中的name属性了。

标签：apply,call分类：JS

javascript插入样式

时间：2012年01月30日作者：愚人码头查看次数:825 views评论次数：6

最近做一个项目，需要javascript动态插入样式，结果以前的方法失效了！查了2个小时的原因竟然是自己手贱，这个最后再说！

javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。

一般情况下javascript动态插入样式有两种，一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件，另一种是在页面中使用<style>标签插入页面样式（这里说的不是style属性）。

一、页面中引入外部样式：

在<head>中使用<link>标签引入一个外部样式文件，这个比较简单，各个主流浏览器也不存在兼容性问题：


function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}

includeLinkStyle("http://css.sodao.com/home/css/reset.css?v=20101227");

但是在我目前做的这个项目中本身应用的样式非常少，直接用引入一个外部样式文件似乎不合适，所以我选择了第二种方案，在页面中使用<style>标签插入页面样式。

二、使用<style>标签插入页面样式：

这种方式在各个主流浏览器存在兼容性问题，像firefox等标准浏览器无法直接获取设置styleSheet的cssText值，标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式；同时使用：document.styleSheets[0].cssRules[0].cssText=newcssText；页面不会自动更新样式，必须使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内；


function includeStyleElement(styles,styleId) {

if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//这里最好给ie设置下面的属性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

这样页面中的元素就能直接应用样式了，不管你的这些元素是不是通过脚本追加的。

关于手贱：

看这段代码：


var divObj = document.createElement("div");
divObj .id = "__div";
divObj .innerHTML="测试js插入DOM和样式";
document.body.appendChild(divObj );

var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

前面说了这个项目是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入，我为了尽可能的保证我创建的元素ID唯一性，手贱在元素ID前加了“__”,表示私有防止冲突。结果悲剧了，IE6，IE7 class和id的命名不能以下划线开头（“_”），竟然把这个给忘了！花了两个小时才找到原因。悲剧啊！得出一个结论！做前端千万不能手贱！

标签：JavaScript,styleSheet分类：JS

Javascript绝句欣赏

时间：2012年01月19日作者：愚人码头查看次数:1,265 views评论次数：3

转载自：http://site.douban.com/widget/notes/22456/note/142716442/

1. 取整同时转成数值型：

’10.567890′|0
结果: 10
’10.567890′^0
结果: 10
-2.23456789|0
结果: -2
~~-2.23456789
结果: -2

2. 日期转数值：
var d = +new Date(); //1295698416792

3. 类数组对象转数组：
var arr = [].slice.call(arguments)

4. 漂亮的随机码：
Math.random().toString(16).substring(2); //14位
Math.random().toString(36).substring(2); //11位

5. 合并数组：
var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
uneval(a); //[1,2,3,4,5,6]

6. 用0补全位数：
function prefixInteger(num, length) {
return (num / Math.pow(10, length)).toFixed(length).substr(2);
}

7. 交换值：
a= [b, b=a][0];

8. 将一个数组插入另一个数组的指定位置：
var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.concat(insertIndex, 0, b));
// a: 1,2,3,4,5,6,7,8,9

9. 删除数组元素：
var a = [1,2,3,4,5];
a.splice(3,1);

10. 快速取数组最大和最小值
Math.max.apply(Math, [1,2,3]) //3
Math.min.apply(Math, [1,2,3]) //1
(出自http://ejohn.org/blog/fast-javascript-maxmin/)

11. 条件判断：
var a = b && 1;
相当于
if (b) {
a = 1
}

var a = b || 1;
相当于
if (b) {
a = b;
} else {
a = 1;
}

12. 判断IE:
var ie = /*@cc_on !@*/false;

还有吗？欢迎回应

分类：JS

前端工程师？前端攻城湿？前端攻城师？前端攻城狮？！

时间：2012年01月16日作者：愚人码头查看次数:1,589 views评论次数：6

前端工程师？前端攻城湿？前端攻城师？前端攻城狮？！

我坎坷的前端路

06年年底我刚刚接触前端概念的时候给自己定了一个这么定义：和设计师一样细腻,和程序员一样严谨;游走在设计师和工程师之间,游刃于用户体验和技术实现之间,斡旋在用户利益和商业利益之间。——偶是一枚前端开发工程师！那时候决定直接一定要坚定的走前端开发这条路！到现在也有5年多了，其中发生了很多事情。

07年开始基本上一门心思的学js，调试前期全是一个一个的alert，后来用Visurl Studio断点调试，前端知识和js基本是从零开始，那时候甚至连ajax都要问后端问个半天才搞懂，那时候做音乐试听的项目，做了2个月，基本每天都是凌晨12点后回家，相当的累，但是每天都非常开心充实。这个项目现在回去想想，交互还是相当的负责，每个页面都有可以直接播放音乐，循环播放，打分，歌词随音乐滚动，还有烦人的mediaplayer操作，还有很多很多的交互功能，或许我是幸运的，第一次做前端就碰到了这么个项目，让我深刻的体会了前端的苦与乐。这以后一直不断的学原生的js。

08年年底做过个2个月的客服，嘿嘿，基本上是帮网友解决一些网页上操作和一些电脑故障问题，这时候才真正思考了一个问题：用户到底是怎么使用我们自己开发的网站的。用户很“笨”，“笨”到你想把你自己的电脑砸了。一个网友在某个原创音乐网站上上传了歌曲，到我们网站来听他自己的歌曲，找了半天没找到说你们网站真垃圾，搞了半天终于知道了他在那个网站上上传的歌曲不能在我们网站上听！当然这个是个极端的例子，原因也很简单其实这两个音乐网站前期本来就是同一批人开发的，架构和交互基本一样。给用户造成一些错觉。

09年开始做了半年的美工，设计加切页面，空的时候也自己玩js。那时候自己搞MTJS，写了一个很不成熟的写了一个DOM类库，基本功能都实现了，那时候学了很多，不过由于相对的不成熟所以一直实际应用，当然现在凡是碰到用原生js写的时候，里面的方法还是非常有效，非常好用的。

09年下半年开始就不做设计了，基本上是切页面，写js，今年开始基本每天都扑在js上了，基本没有多少空余的时间，每天听产品今天这样改明天那样改，说实话累了。现在前端方向那么多，真得好好想想自己接下去的路该怎么走。很多苦逼，很多快乐，有时候也很嚣张，有时候也很无助，更多的是无奈。

前端开发正在蓬勃发展，或许大家也该想想自己将来该往哪方面发展。

以下内容来自：http://www.cnblogs.com/radom/archive/2011/11/23/2259674.html

豆瓣前端:
认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可以靠不同技术分别实现，但要付出巨大的成本。这也是html5这个04年就提出来的标准，直到前两年才火爆的原因。

现阶段的价值也很大。web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资源。

我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。

新浪前端：
作为前端工程师最核心的价值或者说是责任，就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中，无疑离用户最近的人就是前端，其次是UI、UE和产品，然后是后端、DBA和系统工程师。

如果说一个技术开发团队就是一支足球队的话，那么前端工程师无疑就是前锋，他接到队友们倾力传到脚下的球，他责无旁贷，要做的就是必须将球准确无误地打入对方的球门….. 他有两点必须是非常清楚：1、他必须清楚在对方球门与自己之间存在着哪些阻碍；2、他必须清楚如何破除这些障碍将球直至门网….. 他也应该要是所有队员中对这两点最为清楚的人。

每个球队都有自己的明星，可以是锋线杀手、可以是中场战车、可以是超级后卫、也可以是神奇门将、甚至可以是救火教练。而且相信球场上任何一个位置的优秀球员，都有可能在后场断球长途盘带奔袭射门，球进！但任何一支优秀的球队都必须有两类分工，前场球员想的是赢得比赛，后场球员想的是不能输掉比赛，各司其职才能卓越。

而作为一名称职的前锋，你必须是球队里，进球最多、射门技术最好的那一个，否则你还有什么价值可言呢….

百度前端：
应该来讲有三条路，一个是向前走，一个是向后走，另外一个是一直做前端，深入下去。向前即是克军所说的往用户体验与交互设计甚至产品设计师上走，这是最能体现前端价值的了，即用户体验，大多人会往这方面走；

向后走就是做Web开发，往数据库和后台开发方面走，不再区分前后端，大家深入产品的研发实现，这条路就是与软件工程师融合的路，这是的价值就体现在对于业务功能的实现上；

最后还有的是一直深入做前端开发，比如前端各类库与框架的架构设计，W3C各种标准深入研究，对于JavaScript语言本身的研究，对浏览器的原理分析，对于网络传输协议的原理分析等等，这条路要深入下去很不容易，因为涉及很多原理与根本性的东西，所以走的人也不是很多。

当然了，还有一些彻底离开了前端甚至软件开发，转行专门做产品或者做业务运营。可能会因为有不错的技术背景有一定的优势呢。

分类：杂谈

漫话产品设计

时间：2012年01月16日作者：愚人码头查看次数:774 views评论次数：1

很有意思的几幅和产品设计相关的漫画，分享一下：

来自：http://www.uegeek.com/ue/talk_about_product_design

1.鱼饵就应当符合鱼儿的胃口，而不是钓鱼者

第一次看到这幅漫画就笑了：画的不就是做产品的我们嘛~ 花了不少成本、人力、时间，把自己看起来都颇诱人的鱼饵（x产品x功能）抛到鱼塘（网站）里，满心欢喜地守着盼着等着念着：“鱼儿鱼儿快上钩~”鱼儿们来到网站，先是看到一个庞然大物，一晕；然后满世界找熟悉的功能，未遂，再晕；好不容易找对地儿，发现鱼饵味道变了，三晕……

反省：核心需求的满足，永远是最好的饵料啊~

2.踏着别人的脚步前进，超越就无从谈起

“超越”是一个我们都很迷恋的词。但是它后面藏着很多疑问：为什么要超越？怎样算超越？要在哪些方面超越？现在距离有多少？大家的起跑线、方向、耐力、步长、频率一样吗？怎样超越？投入多少成本去超越？……

好了，如果顺利回答完上面的问题，我们往往发现，“超越”其实只是我们嘴巴迷恋的词，而“跟随”才是我们脑袋和腿脚（不自觉地）迷恋的词。正是因为“有距离”，所以欲望很强烈，心情很急切，脚步很错乱。“跟随”就显得很靠谱：直接跨越摸索、纠结阶段，直接节约思考、打磨的时间，直接规避失败的风险，何乐而不为呢？但是，跟随的结果最多是不过不失，大家都跟随了，整个市场的产品也同质化了。我们表面上做了不少事情，将产品改头换面更新换代，但是，实际上属于自己的东西越来越少，产品的个性越来越不鲜明，用户只好在审美疲劳中放弃选择。

反省：寄望通过别人的分享和经验得到提高，将永远没有自己核心的东西

3.找解决方案要比纠结原因的优先级高

呱呱坠地就流芳百世的产品，恐怕是百年一遇的。绝大多数的产品被设计出来后，都会经历一个生命周期。尤其在生命周期曲线的上升期和下降期，我们尤其会纠结于产品停滞不前、不受欢迎甚至是被千夫所指的阶段。这个时候，如上图，大概会有几种情况：a.在汪洋中没有方向，在一小片区域打转，自我感觉良好；b.大家逐渐发现各种问题，前后不靠岸，于是开始相互推诿和指责 c.大家坐到一起，发现问题有ABCD，解决方案是1234，分工是甲做指南针、乙补洞、丙掌舵、丁划桨……

反省：没有目标，任何风向都是不顺的；不提出问题，也无法寻找到原因；办法总比问题多，关键是想不想，做不做。

4.真正的创新只有在经历过擦肩而过后才能实现

创新是产品设计中不可缺少的元素。但它总是披着“灵光一现”的隐形衣，所以我们总觉得它可遇不可求。但是为什么有人遇到了，有人求之却不得？这里有歪理一枚：“遇”字包含这样的意思，两个物体要相遇，前提是至少有一个物体在移动。如果目标是静止不动的，当然只有我们去移动，才有与其相遇的可能；当然，我们的目标也可能是移动的，但是相遇往往只是电光火石的一瞬间，你有把握能捕捉到吗？所以说，“机会只光顾有准备的人”……

反省：实践和思考的反复迭代，是创新的催化剂。

5.过多的会议是一个糟糕的组织明显的标志

这一点，估计只需意会，不需言传了。用会议代替流程和规范，用讨论代替执行，推卸责任，陷入细节，导致时间成本高筑，责权不明晰，奖惩不分明……在产品设计的过程中，我们或多或少都能体会到。

反省：绅士的演讲应该像女人的裙子，越短越好，会议也是。当然前提是问题能够解决。

胡诌了五幅小漫画，很不厚道地作为优涩控新年开篇。更多的漫画，可以到这里和这里围观~

生活总是充满问题和思考的，一言半语的总结常常能让我们获益良多，做产品，也是一样。

标签：产品设计分类：设计素材

Underscore.string.js Version (2.0.0) 中文文档

时间：2012年01月07日作者：愚人码头查看次数:1,211 views评论次数：3

Javascript缺乏完整的字符串操作。Underscore.string.js试图填补这一空白。

正如名称指出的Underscore.string.js为 Underscore.js 的扩展，但你可以独立使用_s-全局变量。但配合 Underscore.js 使用。
Underscore.string.js Version (2.0.0) 中文文档：http://www.css88.com/doc/underscore.string/

github项目地址：http://epeli.github.com/underscore.string/ | https://github.com/epeli/underscore.string

标签：Underscore,Underscore.string分类：JS, 前端资源, 开发资源

时尚的CSS3进度条

时间：2012年01月01日作者：愚人码头查看次数:2,538 views评论次数：9

时尚的CSS3进度条先看效果图，非常漂亮吧：

demo：http://www.css88.com/demo/css3-progress-bars/

英文原文：http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码：
HTML代码比较简单

1
2
3

.progress-bar – 定义进度栏的常规样式。
.blue – 定义进度条的风格，这里是蓝色的
.stripes – 当前进度的动画类型。
span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-bar span {
display: inline-block;
height: 25px;
width: 200px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}

添加颜色，进度条风格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.blue span {
background-color: #34c2e3;
}

.orange span {
background-color: #fecf23;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
background-image: -o-linear-gradient(top, #fecf23, #fd9215);
background-image: linear-gradient(top, #fecf23, #fd9215);
}

.green span {
background-color: #a5df41;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
background-image: -o-linear-gradient(top, #a5df41, #4ca916);
background-image: linear-gradient(top, #a5df41, #4ca916);
}

条纹样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);

-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

闪烁样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.shine span {
position: relative;
}

.shine span::after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

-webkit-animation: animate-shine 2s ease-out infinite;
-moz-animation: animate-shine 2s ease-out infinite;
}

@-webkit-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}

@-moz-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}

发光样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.glow span {
-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;

-webkit-animation: animate-glow 1s ease-out infinite;
-moz-animation: animate-glow 1s ease-out infinite;
}

@-webkit-keyframes animate-glow {
0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}

@-moz-keyframes animate-glow {
0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}

在不支持css3的浏览器下的表现：

demo:http://www.css88.com/demo/css3-progress-bars/

标签：css3分类：html5+css3

用CSS3做的动画按钮

时间：2012年01月01日作者：愚人码头查看次数:1,480 views评论次数：0

在Codrops上看到了这篇文章《Animated Buttons with CSS3》，按钮效果非常赞！转过来分享一下：

demo：http://www.css88.com/demo/AnimatedButtons/ (页面有广告，点击需谨慎！！！)

标签：css3,动画分类：html5+css3

[转载]2011回顾：20个将JavaScript推到极致的网站

时间：2011年12月29日作者：愚人码头查看次数:2,011 views评论次数：2

转载至：http://www.webapptrend.com/2011/12/1123.html

对于浏览器上的开发者来说，2011年又是相当精彩的一年。web开发者Phil Hawksworth在这篇文章中总结了web 上经典的JavaScript用法。

那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大，上面有各种丰富的功能可以供开发者选择，一些在几年前几乎难以想象的功能都已经一一实现。有了这些新功能，开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍，网站能够拥有让人惊喜的用户界面了。

有时候，这种技术的运用是非常精妙的，它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖，悄悄地给人们带来惊喜。

这里有20个特别突出的网站，他们在定位、技巧或者是JavaScript的使用上有各自的独到之处。

演示网站

先看一些有趣的东西。这些网站利用JavaScript将Canvas，WebGL，CSS3和HTML5元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户，或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错，但有些会占用大量的处理器或是显卡，所以笔记本电脑用户常常需要关注他们的笔记本温度，以免温度过高而出现异常。

1. Baroque.me

Baroque.me是一个简单，但是能够催眠的网站，它就用到了HTML5 Canvas元素，并使用JavaScript巧妙地控制了一个简单的虚拟巴赫大提琴设备的渲染工作。网站的声音是由Flash提供的，并且使用JavaScript控制。你可以控制页面上那些跳动的圆点，但是却很难控制大提琴的时间节奏。

它的开发者Alexander Chen来自Google Creative Labs，也参与了非常受欢迎的Les Paul Google Doodle开发，在早些时候，还开发了一个非常棒的可视化NY地铁系统。

2. Beercamp

Beercamp 2011的界面非常有趣，可以自由缩放，它非常巧妙地使用了CSS3和JavaScript技术，这一点吸引了许多人的关注。网站大量采用了CSS3转换和变形效果，你还会发现它劫持了浏览器的滚动事件用来控制网页的缩放效果。今年的早些时候David DeSandro曾分享了相关效果实现的技术细节。

3. Three.js

Canvas和WebGL这些技术为浏览器带来了强大的渲染功能。Mr. Doob开发的Three.js项目是一个3D JavaScript引擎，能够利用浏览器上的这些新功能渲染页面。下面是一个利用Three.js渲染动画或是3D模型的例子。

4. Windows Phone Demo

最新消息：web将覆盖移动设备！老实说，这个消息确实对使用JavaScript技术的移动市场来说是一个好消息。这还只是推动移动市场发展的第一步。

为了演示新的Windows移动设备界面，Microsoft开发了一个Windows mobile上的演示示例。用户确实能够发现它的界面播放的动画非常流畅，并且响应相当及时。这也是CSS和JavaScript的功劳（最好是通过iPhone或是Android设备访问——目前还不支持Windows Phone！）。

工具

这一节介绍的技术可能不会直接给用户带来惊艳的感觉（虽然有些可能可以做到），但他们确实非常重要。其中有些是开发者可能会频繁使用的JavaScript资源，而有些是人们开发浏览器应用时的首选工具。

5. Workflowy

Workflowy可以帮助人们整理自己的想法。在2010年十一月推出了他们的测试版本，仅仅用了30天的时间，它就拥有了一百万条记录了。它是由 Jesse Patel和Mike Turitzin共同开发的，Workflowy使用JavaScript处理DOM操作和存储，并且能够在大量的本地记录中快速查找目标记录。如果你需要整理自己的记录或是想查找新的GTD 工具，Workflowy会是一个不错的选择。最近它还增加了对移动设备和平板电脑的支持，方便用户分享文档。

6. jQuery Mobile

虽然现在移动web开发正变得越来越热，但是移动设备的开发工作还是相当困难的。jQuery JavaScript库的目标就是想在浏览器上实现一个通用的JavaScript开发方法。而 jQuery Mobile的目标则更加远大：简化各种移动设备平台上的web开发工作。这个库已经推出了1.0版本，jQuery Mobile网站就是一个很好的示例，展示了如何使用jQuery Mobile开发一个能够在各种移动设备和传统浏览器设备上运行的网站。

7. Spritecow

Spritecow是由Jake Archibald开发的，它能够帮助用户解决许多繁琐费时的问题。前台开发人员都知道，创建spritesheets的目标就是使得界面响应更加及时并尽量减少HTTP请求的次数。Spritecow将JavaScript，Canvas和一些数学逻辑算法融合在一起，为用户提供了一个好用的CSS生成工具。

8. Cloud 9 IDE

将整个开发环境整合到云和浏览器里面已经成为了我们这个时代的标志。在过去的几年里面，Cloud 9一直在开发他们的集成开发工具（IDE），但是今年，它变成一个令人期待的项目并且成为一个可用的web开发资源。创始人兼CTO Rik Arends表示，与其他类似项目（如Bespin）相比，使用JavaScript来管理DOM，在编辑环境中控制文档性能更好。通过配置和扩展JavaScript，还可以为这个开发环境带来更多的提升和功能。都相当值得期待。

9. Reveal.JS

Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具，能够制作绚丽的演示文稿并生成HTML格式，将它发布到web上。它使用了CSS3变换功能和JavaScript，这个工具大受web开发者的青睐。

10. Pusher

Pusher是一个很棒的工具，在此不得不提。虽然它已经推出一年多了，但最近提升了Web Sockets对浏览器的支持，Node使得Pusher受到了更多的关注。

Pusher提供了一组API用来提升实时apps和服务。有许多非常棒的网站都使用了Pusher。

Pusher最初是由New Bamboo的几个员工开发的，虽然规模不大，但是做的工作却相当了不起，New Bamboo需要实现实时通讯来提升web游戏和工具，所以Pusher自身用到了Node。

11. Speakerdeck

来自Ordered List的Speakerdeck最近被收录到Github上，它利用JavaScript和web技术在web上展示演示文稿。虽然许多其他类似的服务都利用了大量的Flash技术，Speakerdeck相比之下则较少用到Flash，而是利用JavaScript实现幻灯片预览功能。这里有许多丰富的功能和技术。

12. Gauges

既然已经提到了Speakerdeck，就不得不提一下Ordered List的另一个精彩服务——Gauges。它是一个分析工具，有点类似于Google Analytics，使用了常用的JavaScript插件获取用户的访问数据。Gauges有丰富的API，并且能够很好地渲染实时数据。JavaScripty相当的精彩。

改进界面

13. BBC主页

最近关于BBC更新的主页有一些争论。有些人喜欢它，而有些则对它感到反感。就个人而言，作者开始觉得新的主页看起来有点疯狂，但慢慢地也觉得它其实也挺可爱的。它的交互看起来非常酷，并且有许多的改进。即使在不支持JavaScript的环境中，这个主页也考虑得非常周到。但是，它还是显得有点拥挤和正正方方了。

14. BBC iPlayer

虽然已经介绍过BBC了，但是BBC iPlayer的确值得拿出来再说一说。它有一个非常了不起的JavaScript驱动界面，能够非常有效地呈现丰富的内容信息（不仅仅是视频信息，还包括图片信息）。使用BBC的主页和开源的Glow JavaScript库能够做许多新颖的工作。

15. Facebook

必须承认，Facebook在界面设计上做了大量复杂、精细的工作，使得它真实。上面有丰富的实时资讯，通知和聊天功能，虽然它的风格可能无法迎合所有人的口味，但是它的确对web设计产生了影响，并且影响了许多人。

背后的美丽

虽然作者非常关注视觉效果和代码库（代码库确实相当重要），但他最关心的其实是如何巧妙地利用这些技术。最后几个例子很好地展示了如何灵活地使用现有的技术。

16. Github

Github在用户交互方面做得相当出色并且非常注重细节的设计。在代码导航树中，用户能够在项目的目录树中平滑地切换，网站记录了各个页面的地址信息并且可以对地址进行标记，内嵌了编辑器，可以直接在浏览器中修改代码（使用Cloud 9 editor）。使用Canvas实现网站的可视化工作，包括搜索预览，弹出菜单和界面元素，这个列表还在不断增加。Github做得非常棒。

17. Google Doodle

Google Doodles提供了非常有趣的动画，用户能够与这些动画交互。有时，这些设计会让用户会心一笑，有时也许人们还没发现它们，它们就已经消失了。Marcin Wichary是Google的这个“delighters”项目的负责人之一，为了推广这个项目，必须扫清JavaScript优化技术中的障碍。这个团队使用了sprite-crunch技术，用来压缩它们在动画中使用的sprites的。处理方法相当妙。这些涂鸦非常巧妙地利用了浏览器API和JavaScript。Google的开发人员太聪明了！

18. Nike Better World

Nike团队的这个网站常常被复制和讨论。这个网页将JavaScript和CSS结合起来，当用户滚动页面时，营造出一种有趣的视觉差。即使浏览器不支持JavaScript，这个网站也能优雅地降级显示，将视觉差效果移除，但并不会影响页面的正常显示，作者建议将导航链接保留下来。可以用JavaScript劫持这个链接，这样无论应用环境是否支持JavaScript，这个导航都能够工作。

19. Mobile Beetle

作者在今年早前曾对Volkswagen Beetle的新网站提出了一些批评。在此不会重复这些批评，而只是介绍这个网站在将JavaScript推向极致的几个方面。它也是一个旋转效果做得相当不错的网站。这个网站的移动版本做得相当精巧。当你在iPhone上访问这个网站时，它充分利用了触摸和旋转事件提升服务的用户体验（尽管如果不是使用的WIFI的话，网页中的图片可能显得有点过大）。

20. Twitter移动网站

其实移动设备上已经有许多非常棒的Twitter客户端了，以至于大家可能会忽略今年Twitter推出的移动优化版本的web客户端，尽管它相当不错。Twitter的开发团队采纳了iPhone Twitter apps上的许多UI惯例，并且在自己的web框架中重新设计了一些UI。结果相当不错，在智能手机上访问浏览器中的页面就像是native app一样。在Android和iPhone上的效果都相当出色。真的是一个很棒的工作。

…这就是全部的20个网站

这就是作者挑选出来的20个将JavaScript推到极致的网站。当然，其实应该还有许多其他的网站也有资格出现在这个列表上，但是web太大了，而列举出20个网站只是一个很小的集合。虽然许多其他的网站也有一些突出的特点，但也各有不足。JavaScript让开发者能够在浏览器中做许多了不起的工作，但这里列出的20个网站中，有些为了实现某些特色牺牲了网站的访问性、地址性和其他性能或功能，这是一个优秀的web应用应该克服的。不过，它们确实在今年，给web开发者带来了不少新的想法。

文章来源：2011 in review: 20 sites thatpushed JavaScript to the limit

标签：JavaScript分类：前端志, 前端资源, 开发资源

Page 1 of 7012 3 4 5 6 7 8 9 10 »Last »