10个绝对让你疯狂的HTML5和JS实验性展示

看看今天我们收集的绝对让你疯狂的HTML5和JS实验展示,这些演示验证了各种框架和超酷互动的性能。大多数的演示都能在Google Chrome和Firefox里流畅的运行,当然IE5并不支持这些演示。

1. Canvas Sphere

由Emil Korngold渲染的一个超酷的3D点装球体实现的2D投影,使用一个非常迷你的3D引擎。这个演示使用z-sorting和alpha motion模糊方式来生成3D旋转感受。看看这个超酷的演示吧!

Canvas Sphere

2. Marbles

简单的物理演示,使用新发布的A3 WebGL引擎。请确认你使用Chrome来查看演示,超酷!

Marbles

3. Noise Field

通过Perlin noise生成的离子轨道特效。移动鼠标来修改颗粒移动行为。点击会生成随机参数。

Noise Field

4. Fishbowl

一个超赞的HTML5测试用演示,由微软开发创建用来测试浏览器的性能。看看你最多能运行多少条鱼吧。

Fishbowl

5. Sticky Thing

丢过去看看是否被粘住了

Sticky Thing

6. Breathing Galaxies

一个动态变化颜色和直径的javascript实现的内转轨迹线演示。你可以使用键盘来修改形状,或者移动鼠标来创建一个新的形状。

Breathing Galaxies

7. Flower Power

另外一个非常不错的实验 – 简单的画图工具,使用花朵来作为笔刷并且使用贝塞尔曲线

Flower Power

8. One Hour Per Second

现在youTube每秒钟会上传1小时的视频。为了更好的说明,他们开发了一个HTML5网站来进行拥有上下文的数字比较。大家看看吧!超酷!

One Hour Per Second

9. Asteroid Belt

图片上的HTML5动画效果

Asteroid Belt

10. Graph Layout

一个互动的强迫式图片布局

Graph Layout

via jquery4u

12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用一些非常强大的jQuery或JavaScript来加强现有的表单元素的功能。

下面我们收集了 12 个很有用的表单扩展插件,提供更好的用户体验:

DropKick

DropKick

创建自定义的下列列表,并附带皮肤支持

Chosen

Chosen

jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能

TextextJS

TextextJS

TextExt 是一个 jQuery 插件,提供对文本输入框的功能扩展,可实现自动完成、标签输入、ajax和过滤功能。

AutoTab

AutoTab

Autotab 是一个用来提供自动 tab 键控制和文本过滤的 jQuery 插件。

jQuery FIle Upload

jQuery FIle Upload

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

MailCheck

MailCheck

是一个用来对email地址进行验证的 jQuery 插件

jQuery Mask Plugin

jQuery Mask Plugin

用来设置输入框输入各种形式文本的 jQuery 插件

NoUISlider

NoUISlider

noUiSlider 是一个很小的 jQuery 插件将 html 对象编程一个滑动块。

Clearfield

Clearfield

实现类似 HTML5 的 placeholder 的效果

jQuery.fn.autoResize

Autoresize

自动根据输入的内容长度对输入框进行扩展的 jQuery 插件,支持 textarea, input[type=text] and input[type=password] 元素.

Limit

Limit

Limit 是一个用来对 textarea 和 input 输入框进行字符数限制的 jQuery 插件。

Password Strength

Password Strength

用来提示密码的复杂强度

JavaScript是一门令人愉悦的语言

作为一名前端工程师,我承认我可能是有偏见的,但是我真的非常享受编写JavaScript程序。JavaScript代码可以非常的优雅,也可以让人崩溃。在很长一段时间内JS在开发者社区中都是一个笑话。但是现在JS是一门聚光灯下的明星语言,越来越多的开发者加入到这个阵营。这篇文章例举了几个我喜欢JS的理由。

速度

Google的V8 JS引擎让我们可以在客户端和服务端更好的执行JS代码,这就给复杂的JS程序提供了基础。我们现在可以发送几百KB的压缩后的JS代码到客户端,并且可以预期客户端可以流畅的执行这些代码。

除此以外,JS也是非常容易编写和测试的。编写-保存-刷新,简单三个步骤就可以看到效果,这比任何其他开发环境都要快速。我们现在也有webkit控制台和调试器,可以帮助我们方便的调试代码。我最近也在尝试使用Jasmine来做单元测试。

简单

JS是一门非常轻量级的语言,没有大量复杂的保留字,没有各种复杂的数据类型。JSON已经成为了流行的数据传输格式。JS也是Web浏览器的本地语言,还有很多工具支持,几乎不用任何安装工作。

自由

也许是JS框架的作者希望把代码尽量精简,或者他们只是默认事情就应该保持简单,我发现所有JS的框架都没有很强的侵入性,不像Rails,Rjango,CakePHP那样必须按照约定的格式去写代码。流行的JS框架例如jQuery,Underscore.js,Backbone.js的代码是完全可读,并且很专注,而且他们的设计是可以互相整合的。

 可塑性

删除代码是一个很幸福的过程,因为它减少了复杂性,修复了bug,缩减了代码量。所以我很享受删除自己写的垃圾代码的过程。由于页面的重新设计或者需求的变化,前台代码天然具有短生命周期。模块化是浏览器端JS的天然属性,这让我可以重构一个组件而不用把所有的代码都搞的一团糟。

英文出自:allenc.com

jQuery 1.7.2正式版发布!

jQuery 1.7.2正式版发布。该版本在1.7.1的基础上修复了大量的bug,并改进了部分功能。而相比于1.7.2 RC1,只修复了一个bug。

值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。 更多详情参看jquery。

下载地址:
http://code.jquery.com/jquery-1.7.2.min.js (minified, production)
http://code.jquery.com/jquery-1.7.2.js (unminified, debug)

37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 CSS3 以及各种浏览器,同时还有许多成熟的插件可供选择,能给用户带来更好的使用体验。本文整理了 37 个优秀的 jQuery 菜单插件,用以帮助你创建更好的导航菜单。

1、用 jQuery 和 CSS 创建的 Mac 风格的菜单

如果你是一名标准的 Mac 迷,你一定会喜欢这个菜单。它有两处停靠的位置:顶部和底部。

2、超级菜单包

超级菜单包里包含了 10 个效果很酷的菜单,其中有 5 个是全部用 CSS 写出来的。对于那些想要拥有一次特殊设计体验,或者寻求全新起点的设计师来说,它堪称完美。

3、LavaLamp

LavaLamp 是一个简单易用的 jQuery 插件,可以让你创造出效果惊人的水平导航条。让人高兴的是,这很容易实现。

4、Quick & Pro 菜单

Quick & Pro 菜单插件可以创建带有特殊风格的 jQuery 大型菜单,这在网站设计中很少见,不过,却很容易让用户快速得知网站的大量信息。

5、Superfish jQuery 菜单插件

Superfish 是一个专门用于菜单上的 jQuery 插件。

6、菜单制作者

这是一段 JavaScript 代码,为你提供一个具有友好界面的工具,此工具用圆角和流畅的动画帮助你创建导航菜单。制作导航菜单从未像这样简单。你所要做的仅仅是拖动滚动条来调整菜单的属性。

7、快速访问菜单

轻松定制,易于集成,并可以快速访问你的网站。是适用于网站设计的最小的设计方案。

8、Sticklr——用 CSS3 和 jQuery 实现的固定侧边栏

灵感来自 Envato 站点的切换工具,这里有一个很有用的固定侧边栏,用 CSS 实现后并经由 jQuery 增强了这一效果。

9、Puffer Fish 式的导航

带有悬停发光效果的导航插件。

10、滑动标签——jQuery 插件

滑动标签是一款为你的网站创建水平或垂直动画标签的 jQuery 插件。你可以在一个页面上实现多个标签实例,而且可以用 CSS 实现任何你定制的标签。这款插件有很多定制的选项,使得它灵活易用,易于满足你的定制需求。

11、垂直滑动的 jQuery 菜单

毫无疑问,你的客户一定会喜欢它。更妙的是,本教程也将教你如何用 Photoshop 来设计此类菜单。

12、Sherpa 完整的导航系统

Sherpa 汇聚了每个页面都必不可少的三个主要导航元素:导航栏、侧边栏和固定页脚。

13、向下滑动菜单

这个创意是当缩略图弹出时,菜单选项像盒子一样滑出。对于一些菜单选项,我们还容纳一个子菜单来添加一些链接。子菜单是从左边还是从右边滑出,这取决于鼠标放在哪一个菜单选项上。

14、Memu——一个简单的的 CSS / JavaScript / jQuery 的菜单

一个小而实用的 jQuery 插件。

15、下拉式菜单

有了这个脚本,你可以制作美观且互动性良好的下拉菜单。这个脚本的好处是,你不仅可以制作下拉列表菜单,也可以使用一个 div 标签作为下拉元素。

16、用 JavaScript 写出超大水平菜单

17、Ninja UI

18、超大的菜单设置

通过 10 多个 jQuery 效果和 13 种颜色中的一种来创建这种独特的菜单,而这一效果可以由巨型下拉菜单设置完美的实现。 

19、图片悬停移动

一个简单实用的导航插件。

20、jQuery One Page 导航插件

有了这个插件,当导航被点击时页面翻转的更平滑。它还可以根据翻转的内容自动突出正确的导航区域。

21、固定页脚

这里使用 jQuery 只为增强网页特效的效果。

22、Asura jQuery Footer

Asura jQuery 式的页脚是一个高度可定制的固定页脚。它可以让你更自由地在网页底部放置内容。

23、Dropp

Dropp 是一个可以用来取代常规下拉菜单的 jQuery 插件。

24、jMenu

jMenu 是一个我们可以用来创建带有无限制子菜单水平导航的 jQuery 插件。菜单中的标记显得很干净,因为它使用嵌套列表。

25、skinableTabs

skinableTabs 是一个不显眼的 jQuery 插件,它允许你用美观的标签来凸显网站的内容。

26、地铁地图可视化的 jQuery 插件

这个插件把无序的列表嵌入到一张类似于伦敦地下地图风格的地铁地图里。

27、MobilyBlocks

MobilyBlocks 插件允许你将无序列表创建成一个类似于圆圈的样式。

28、mb.verticalSlider

29、infiniScroll

30、jQCloud

jQCloud 允许你创建整齐的云形字和云形的标签。由于这个插件产生纯 HTML 代码,这种云形字的布局可以很容易地通过传统的 CSS 样式自定义方式来实现。

31、jQuery Stepy——一个魔幻般的插件

32、使用 jQuery 的手风琴式菜单

33、jQuery 菜单选择器

这个插件通过本地路径来激活菜单选项。

34、FooBar——一个 jQuery 式的通知栏

Foobar 的是一个位于页面顶部的通知栏,它简洁且不显眼,当用户访问时,用以告知或公布网站信息。

35、无尽的自动浏览

当运行在一个 DOM 元素上的时候,倘若用户浏览到此元素的底部,这个插件将扩展此元素并自动填充内容。内容是通过 Ajax 来获取的,插件使用本地存储来保持高速缓存。

36、jQuery Context Menu

ContextMenu 是一个轻量级的 jQuery 插件,可以让你选择性地覆盖浏览器的右键菜单。

37、jCrumb

jCrumb 是一个 jQuery 插件,可以让你添加一些琐碎的消息到任何一个 Web 页里,而不必担心站点地图的问题。

英文原文:35+ Useful jQuery Menu Plugins.