Category Archives: Design

30 个免费的响应式 HTML5 CSS3 网站模板

网站模板这种东西根本无需任何文字介绍，有图才是真相！ Free Retina Ready Responsive App Landing Page Website Template Demo| Download Flat Design Portfolio Template Demo| Download Brushed | Responsive One Page Template Demo| Download Big Picture HTML5 Template Demo | Download Tesselatte – A free responsive site template Demo | Download OVERFLOW Demo | Download Runkeeper a mobile app Responsive web Template Demo| Download Pinball Responsive Grid Style Blog Flat web template Demo| Download Bak One singlepage Flat Corporate Responsive website template Demo| Download Free HTML Template Andia Demo| Download Free Template Produkta: 4 HTML Templates in One Demo| Download Website – HTML5, CSS3, jQuery […]

20 个具有惊艳效果的 jQuery 图像缩放插件

jQuery相对与Flash的魔力已经贯穿整个网络。尽管，Flash层被认为是用于网页设计的首选，然而随着jQuery的出现，以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边站了。 相比笨重的Flash，使用jQuery可以轻松的创建复杂的自定义动画效果以及提供友好的SEO，因此在两者之间的选择也就是明摆着的事儿了。 一些酷炫的jQuery 图片效果，类似于不同方向滑入，轻松添加动画，掷入、排序、放大效果，摇拍，图片拍摄效果，滑动效果以及大量其他的仅仅需要少量编码的特效使得jQuery称为开发者和网站制作的首选。 下面的jQuery插件对含有需要大量空间的巨型图片的网站非常有用–通常有这样沉重的图像负载的网站，其加载过程会非常慢，但通过这些 jQuery 图像插件，图像不仅能够用无限的特效呈现视觉刺激，而且页面加载的速度也会达到标准。 这里介绍的是20个jQuery图像缩放插件的演示，它们可以描绘出无数的图像效果，可以被利用来为最终用户提供一个更诱人的视觉体验。享受它们吧！ 1. ElevateZoom ElevateZoom是一个可以轻松创建图像缩放界面的高度可定制jQuery插件。它可以对一个单独的高品质图像或两幅图像（一个缩略图和一个高品质版本）进行工作。缩放窗口可以放置在页面（或图像）的任何部分，还有一个选项可以内置缩放以节约视觉空间。 2. Mlens mlens，是一个很小的jQuery插件（minified 和 gzipped 之后只有约 1KB），简化创建了这个放大镜的很多功能。它有几个参数，如镜片的形状（圆形或方形）、镜头的尺寸，以及定制边界的选项。它的多个实例可以用在同一页面，其WordPress插件正在开发中。 3. Cloud Zoom Cloud Zoom 是许多高知名度的零售网站都使用的一个横空出世的流行jQuery图像缩放插件。持续改进，定期更新和技术支持使它成为那些为了客户而需要一个成熟、可靠的jQuery图像缩放解决方案的忙碌开发者们青睐的选择。 4. Nivo Zoom Nivo Zoom 是一个类似Lightbox但更为简单的图像缩放jQuery插件，来自流行的 Nivo Slider 的开发者。此插件是轻量级的（压缩后只有4KB），只集中在图像上，并配备了一堆的设置。它支持5种不同的变焦类型，并可以显示图像的标题（能很好处理长文本）。 5. FancyBox FancyBox 是一个可以为你网页上的图像、HTML内容和多媒体提供漂亮和优雅的缩放功能的工具。它建立在流行的JavaScript框架jQuery之上，易于实施和定制。 6. Zoomy Zoomy 是一个快速和易于集成的插件，可以放大任何图片。它是一个灵活的缩放插件，可以用于同一图像的两个拷贝，或者一个链接到其自身的图像。大多数的CMS系统会保存或创建同一图像的多个尺寸版本，所以它可以被轻松设置。只需在所显示的较小的图像上链接较大的放大图像，并告诉插件缩放时使用该链接即可。这只需要一点点脚本。 7. EasyZoom EasyZoom 是一个优雅的、高度优化的jQuery图像放大和平移插件，它基于 Alen Grakalic 的工作。EasyZoom 支持触摸式设备，并很容易用CSS定制。 8. jQuery Zoom jQuery Zoom 是一个jQuery的小插件，用于在 mousedown 或 mouseover 时放大图像。它已经在 Firefox，Safari，Chrome，Internet Explorer 6、7、8、9，和 Opera 11 下测试通过。它遵循MIT协议发布。 9. Zoomooz.js Zoomooz.js 是个易用的可以对任意网页元素进行放大的jQuery插件。你只要对任意 HTML 元素添加名为“zoomTarget”的class，就可以对其添加放大效果。放大可以通过点击body来重置。它在Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera 和 Chrome 上测试通过。 10. Easy Image Zoom Easy Image Zoom […]

Web 开发者必备的 14 个 JavaScript 音频库

网页设计可能是现在最有趣的领域之一了。这块的东西对所有的人，不管是知识储备里有料没料的，都敞开大门，机会多多哦。 其最大的特点就是随着时间的推移，实践的深入，你可以慢慢学习着成为一个大鸟。 涉足这个领域，Google将会是你最好的导师，同时她也将毫无偏颇的对你的水平进行评价。设计并不全是铁定的要为应用程序的创建或者编程语言的一些逻辑应用进行大量的编码工作。她更像是创造力同逻辑代码的结合，从而可以使您开发出可以用美丽来评价的东西。 在网页设计的领域，玩转你手中工具的过程中也蕴藏着巨大的机遇。有趣的是，特定开发者存在的原因就在于并不是每一个人都同时具备编写逻辑代码的技能，并且拥有风格的艺术创造能力。 因此，在这种情况下我们就可以理直气壮的认为拥有两种技能的人机遇最大，他们 在这个领域比其他人更有机会收获成功。现在需要意识到的一个最重要的问题就是一个人类，或者让我称之为人，不会同时拥有所有的素质。这就是为什么从主要的编程语言角度来考虑，我们也会有对开发方面需求的原因。 这意味着更好更新的代码段和工具将会对开发者有帮助。一个开发的部分的 存在，在这个领域中就相应会有大量对新事物的需求，就像我们在这里将要讨论的音频效果。 老实说，向站点中加入音频效果会很有用处，这仍然是目前最好的开发者需要经历的一个发展阶段之一。现在喜爱使用Javascript进行设计的人拥有了发挥音频特性的基础设施，这就证明了它是一个可以推动网页设计向前发展的巨大舞台。这可能是网页设计领域加入的最新的也是最酷的东西之一，并且毫无疑问的事实是它将保持一个更长的发展时期。 1) JavaScript 音频库 –  Buzz Buzz 是一个小而强的 Javascript 库，能让你方便的利用上新的  HTML5 音频元素. 在非现代浏览器上它会悄悄的消失掉. 2) JavaScript 音频库 – Timbre js Timbre.js 提供了一种采用像jQuery和node.js采用的那种现代Javascript使用方式来处理和合成音频的功能. 他有许多的 T-Object (正式的称呼是: 音色对象Timbre Object)，可以连接起来为整体的音效渲染定义基于图形的路由. 3) JavaScript 音频库 – jPlayer 4) JavaScript 音频库 – Annyang Annyang 是一个可以让你的访问者用语音命令操作你的站点页面的小巧的js库. Annyang 支持多种语言，但是没有其他依赖，仅重2kb，并且免费. 5) JavaScript 音频库 – Sound Manager 2 With the help of在 HTML5 和 Flash 功能的帮助下, SoundManager 2 基于单一的Javascript API提供可靠的跨平台音频支持. 6) JavaScript 音频库 – Plivo Plivo WebSDK 允许你直接从任意的web浏览器发送和接收声音. 他们提供了一个页面 SDK ，而在  SDK 的帮助下你可以创建像 Click to Call, Conferencing Apps 以及甚至像 Webphones 那样的应用程序. 7) JavaScript音频库 – SoundJS Javascript音频库SoundJs提供了简单的API和强大的功能，适合用于处理音频。 8) JavaScript音频库 – jWebAudio Web Audio可以被用于网络应用中声音的处理和同步。jWebAudio隐藏了Web Audio的技术细节，让控制音频变得更容易。 9) JavaScript音频库 – ION Sound 10) Howler js – 现代Javascript网络音频库 11) JavaScript音频库 – Fifer js 12) JavaScript音频库 – Twilio js Twilio.js让你在浏览器和Twilio应用之间建立音频连接。你可以在浏览器里使用主动或被动音频连接，以此构建网络电话、对讲机、网络会议、即时通话系统等等应用。 13) JavaScript音频库 – Audiolet 14) JavaScript音频库 […]

前端优秀辅助工具（html5+css3）(转载)

CSS3对于前端工程师来说，越来越重要了。有很多CSS3的效果真的不需我们自己一个一个 去写，在这种情况就互联网上有关于CSS3的工具就出现了，这些工具将给你的制作节省很 多时间，让你有更多的时间去做自己想要做的事情。   CSS Animatie CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码。   http://cssanimate.com/   Long Shadows Generate Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。 http://sandbox.juan-i.com/longshadows/     Fontastic Fontastic是一个在线生成字体图标的app，可以定制属于自己的图标字体。 http://fontastic.me/   Screensiz.es Screensiz.es站收集整理了移动端的相关尺寸。   http://screensiz.es/phone   Live Tools Live Tools是一个UI制作工具，他提供了按钮、表单、icon图标和Ribbons的制作工具， 可以在线配置相关参数，生成你需要的效果代码。   http://livetools.uiparade.com/index.html   Button Generator 生成和图片效果一样的按钮工具。 http://www.cssbuttongenerator.com/     @FONT-FACE GENERATOR @FONT-FACE GENERATOR只需其中一种字体，就可以帮我们转换成@font-face各浏览器 下所需的所有字体格式。只是中文字体太大，不太好用。   http://www.fontsquirrel.com/tools/webfont-generator     @font-face ICON图标 ICON使用@font-face制作是越来越普遍了，但有一些icon字体库有几个icon，而往往我 们有时候只需要其中的几个，加载所有的icon感觉浪费，其实没有必要这么做的，在线 有两个网站，上面提供了各种字体icon库，我们只需要选择其中的部分，进行安装就OK了。 http://fontello.com/     http://icomoon.io/app/#/select       Ultimate CSS Gradient Generator Ultimate CSS Gradient Generator真心的好用，是我常用的一个在线制作渐变的工具， 他除了类似于photoshop的渐变工具之外，还是firefox和chrome浏览器的一个插件。而 且还能生成兼容IE的滤镜代码，好强大的。 http://www.colorzilla.com/gradient-editor/       Pageblox Pageblox是一款在线生成布局的工具，提供了七种常见的布局模式，而且还可以根据自 己的需求做一些自定义的设置。 https://www.pageblox.com/generate   CSS Load CSS Load是一款纯代码制作loading的工具。 http://www.w3cplus.com/source/front-end-developer-excellent-tool.html […]

超棒的 15 款 Bootstrap UI 编辑器

自从 2011 年 Mark Otto 和 Jacob Thornton 开发了 Bootstrap，我们第一次接触并熟知了 Bootstrap 。这些都归功于 Twitter！从那以后，它就非常流行并且成为了最好的响应式框架之一。Bootstrap 帮助开发者快速高效的开启大量新的 web 项目，受到了广大开发者们的青睐。 为了照顾那些不是很熟悉 Bootstrap 但是又想继续深入了解的开发者，我们在这里简单的介绍一下。Bootstrap 是一个 pre-styled 组件的扩展库，有着大量的附件和非常好用的插件，可以帮助开发者们快速的开始他们的新项目。 好了，回归今天的主题，这里介绍的是 15 款最好的 Bootstrap 设计工具和资源，也可以说是 UI 编辑器或者是在线编辑工具。这些超棒的 Bootstrap UI 编辑器允许开发者们自定义设计框架，实现他们心中每个关于 web 的设想。 下面的列表就是精心挑选好的超棒 Bootstrap UI 编辑器，分享给所有的开发者和喜爱 Bootstrap 的朋友，不用再为找不到合适的 Bootstrap 设计工具而烦恼，也不用在众多 Bootstrap 设计工具中徘徊迷茫了！好好阅读下面的列表，找到适合你的那一款 Bootstrap UI 编辑器吧：） 1. Bootstrap Magic 这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新简历框架，方便用户的下载和使用。 2. BootSwatchr BootSwatchr 是由 Drew Strickiand 独立开发和维护的，是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具，这也是它的特色之一。BootSwatchr 是个可视化的工具，可以从底层开始创建 Bootstrap 主题。 3. Bootstrap Live Editor Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html，也因此它是个明智的选择。除此之外，它还包括高级的选项比如按钮配置，自定义标签和为用户做最明智最有益的选择。 4. Fancy Boot Fancyboot 是个非常有用的 Bootstrap 自定义工具，允许用户编辑 […]

为网页设计师准备的10个在线的HTML5设计工具

1) Google – Web Designer 2) SpriteBox 3) Xray 4) Chrome – Ajax Animation 一个 HTML5 的强大的基于 Web 的动画套件，原本是考虑作为可在线使用的 Flash 替代品，但目前其已经完全支持离线模式。 5) Wix 6) Dunked 7) HTML5 Audio Maker 8) Speakker 9) Sketchtoy 10) SVG to Canvas 转自：http://www.oschina.net/news/47880/great-online-html5-tools-for-web-designers

(转)CSS3 @font-face

http://www.fontsquirrel.com/fontface @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。 首先我们一起来看看@font-face的语法规则： @font-face {    font-family: <YourWebFontName>;    src: <source> [<format>][,<source> [<format>]]*;    [font-weight: <weight>];    [font-style: <style>];  } 取值说明 YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径； format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等； weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。 兼容浏览器 说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念： 一、TureTpe(.ttf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】； 二、OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】； 三、Web Open Font Format(.woff)格式： .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】； 四、Embedded Open Type(.eot)格式： .eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】； 五、SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。 这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。 为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

但为了让各多的浏览器支持，你也可以写成：

说了这么多空洞的理论知识，大家一定有点心痒痒了，那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如我们有一个这样的DOM标签，需要应用自定义字体： HTML Code: <h2 class="neuesDemo">Neues Bauen Demo</h2> 通过@font-face来定义自己的Web Font: @font-face {   font-family: 'NeuesBauenDemo';   src: url('../fonts/neues_bauen_demo-webfont.eot');   src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format(’embedded-opentype'),    url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),    url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),    url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');   font-weight: normal;   font-style: normal; } 我在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去： h2.neuesDemo {    font-family: 'NeuesBauenDemo' } 效果： 看到上面的效果，我想大家会感到@font-face很神奇，同时也想争着做做看，可是一动手才发现，特殊字体我要怎样才能得到，那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢？有些朋友可能就不知道如何运手了，那么我们就带着这些问题来一个全程完成的实例吧： 一、获取特殊字体： […]

2014 年十大网页设计趋势和预测

新的一年刚刚开启， Zing 设计团队认为这是一个很好的时间来回顾 2013 年 web 的设计场景，同时也对 2014 的 web 设计趋势做了些分析，总结出了十大网页设计趋势和预测，希望能给大家一些启发：） 1. 大背景图片 大背景图片（Large hero areas），是从印刷设计中借来的专业术语，指包含少量文字内容、位于网站顶部的图片。在很多网站上，你可以发现现 在 web 设计师们放弃曾经喜欢滑块轮播设计风格，转向了大背景图片设计风格，以大标题为中心，并配以简单模糊的图片为背景，有的则是精心设计的插图，可以前往Lateral inc 和 Focus Lab 查看漂亮的典型示例。 从滑块轮播到大背景图片的转换最大的原因就是大背景图片更能抓住用户的注意力，吸引他们继续探索网站的其他页面。这个趋势越来越流行，并且没有丝毫停顿的节奏，这必将是 2014 年 web 设计的潮流与大趋势！ 2. 更多视频内容 越来越多的网页使用视频替代文字去诠释新技术新概念，随着 YouTube 和 Kickstarter 越来越流行，互联网用户也更倾向于观看视频而不是阅览文字。有更好的方式为什么不去使用？视频提供独特的文字和图片组合，能在短时间内更好的传达新的想 法。很重要的一点，视频也能帮助提升在搜索引擎的排名，例如 Google。 有人会说，视频会消耗很多内存空间和流量，但是当今科技发展迅速，带宽限制在不断提高，允许快速的下载和提供大量的流量。所以就目前而言，视频绝对是 2014 年持续增长的趋势。同时，另外一个有趣的地方是，很多网站已经趋向于自己保管，管理和控制视频，而不再是依赖于 youtube 上面的视频了。 3. 扁平化 UI 设计 她的大名就是摇晃，这么说当然有充分的理由。扁平化 UI 设计拿到了 skeuomorphic design 的宝座，这是一个新数字世界的入门指引。现在我们理解了庞大的互联网世界是怎么工作的，我们就需要抛开废弃的东西——现在是时候抛开一切外物来单纯的讨论根源了。 扁平化 UI 也许是跳过 skeuomorphic 时期的开发者第一次接触的 web 设计风格。大多数是通过 iPad 或者是电子阅读器来接触扁平化 UI 设计的，也可能是当他们拿到他们的第一部智能手机的时候，就如同 UX 和 UI 设计者知道也确信新用户可以在应用商店接触到扁平化的设计。 去年，曾预测Apple将会动摇其拟真设计（Skeuomorphism）。iOS7的发布带来了所谓的“扁平化设计”，该设计丢弃了阴影及渐变效果，使 某些元素获得了视觉上的升级。 长期以来，Apple一直引领着设计的时代潮流，它所做的任何事情，都会引来世界的追随。iOS7发布不久，每天都会有很多具有“扁平化设计”风格的网站 上线。早期的扁平化 UI 设计开始时有很多创新的空间，所以在 2014 年，我们预测 web 设计风格将会更直观，简单，界面平面化！ 4. 更简单的导航和空白使用 扁平化 UI 设计的引入给网站创建了空白的区域，没错，就是空白。空白空间提供了清晰简洁的风格，使网页更容易保留，而且提高可读性。这里是一些很受欢迎的空白使用示例： Exposure, Hello Monday 和FoundryCo. 创建这些空白空间的时候，我们也注意到了页面导航和侧边栏。页面导航会变得更简单，侧边栏可能会在某些时候被放弃。设想一下：你正在阅读一篇整齐、悦目， 没有任何其他干扰信息的文章。设计师通过去除那些分散用户注意力及扩展性的内容，努力打造更愉悦的阅读体验。这种是一种极受欢迎的改变，一种用户期望继续 保持的趋势。在 2014 年，我们预测更多的网页将会变得更简洁并且会更好的使用空白区域。 FoundryCo 的白色空间使用 5. 朴素的视差效果 web 视差效果设计创建了一种 […]

用于构建交互式图表的最佳 jQuery 图表库

对于JQuery图表来说，其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据，而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图表库，已经越来越流行了，因为它们有着相当吸引人的组件，囊括了我们已知的包括线状图，柱状图和饼图等7种图表类型。另外，这些js图表库提供一些有用的组件作为它们的可选项，比如说放大，缩小，这些工具能提供关于数据的更多信息，同时也提供一些选项对其进行定制。 tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 用户通常遇到某些使用了兼容现代浏览器的HTML5的canvas特性的jQuery图表，并不能很好的与IE兼容。整体上，这些库集成了六种图表类型，比如散点图，饼图，柱状图，带点的折线图以及区域图。这些图表能够通过简单的配置就能展示多种图例，这将帮助人们清楚的分辨各图表项。 在这篇文章中，我们分享给读者的是15个图表库——各种从简单到复杂的高级图表，它们都能胜任。希望你们喜欢！ tnjin 翻译于 2天前 1人顶 顶 翻译的不错哦! 1. Chart.js : 使用HTML5 canvas的图表库 Chart.js是一个令人印象深刻的基于HTML5的canvas特性构建的javascript图表库。目前支持六种图表类型（折线图，柱状图，雷达图，饼图，柱状区域图和极坐标区域图），而且这些通过一个独立的，不足5Kb的包来提供的。颜色，字体，加粗以及图表大小都是可以定制的。同时，图表也可以选择在加载的时候添加动画效果。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 2. xCharts : 基于数据驱动的图表 xCharts是一个用于给网站创建具有漂亮的视觉效果和自定义数据驱动的图表的javascript库，它依赖于D3.js。基于HTML，CSS和SVG技术，xChart被设计成能够被动态，流式和开放的集成和定制。 由于xChart使用SVG技术，我们能够直接通过CSS生成大部分的我们定义的xChart图表。这意味着如果你愿意，你只需要做很少的控制就可以处理这些可视化的图表。定义图表风格的最好的方式是从包含的样式表开始，或者使用你的浏览器的元素监视器来查看每一个元素可用的CSS选择器。  Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 3. Sigma.js : 使用HTML5的canvas对象作图 Sigma.js 是一个使用HTML5 Canvas元素作图的免费开源的javascript图表库。它被特别设计成适合分享页面上交互的网络地图和浏览动态的网络数据库。这个js库以MIT协议分发。 Source 4. HighCharts Highcharts 是一个纯粹使用HTML5/Javascript写的图表库，能向你的网站或者网络应用提供直观交互的图表。目前，Highcharts支持折线图，曲线图，面积图，面积拟合图，条状图，柱状图，饼图，散点图，仪表图，面积范围图，面积曲线图，条状范围图，气泡图，箱型图，误差线，漏斗图，瀑布流和极坐标图表类型。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 5.Fusion Charts jQuery 的FusionCharts插件帮助你增加交互式的JavaScript图表，在你的网站，移动端和企业级应用中绘图。它将FusionCharts套件XT的灵动和全面的特点与jQuery简易的语法融合在了一起 Source 6. Flot :  jQuery中引人注目的JavaScript绘图插件 Flot 为jQuery准备的一个纯JavaScript绘图库, 重点在于使用简单，引人注目的界面和良好的交互特性。图的一些关键特性是通过开关，放大缩小和与数据点交互来控制的，此外还有它加入了简单工具提醒的功能 Source Mitisky 翻译于 2天前 0人顶 顶 翻译的不错哦! 7. JS Charts : 免费的JavaScript图表 JS Charts是一个基于JavaScript的图生成器，它只需要很少或不需要编码。使用JS Charts来绘制图表是一个简单且容易的工作，因为你只需要使用客户端脚本（即通过Web浏览器操作）。不需要额外的插件或服务器模块。只引用这个脚本，准备好图表数据的XML、JSON或JavaScript数组，OK，你的图表已经就绪了！ 源码 8. jQuery Sparklines 这个jQuery插件直接在浏览器中生成波形图（小的内联图表），使用的数据可以是内嵌在HTML中或通过JavaScript提供。这个插件与大多数现代浏览器兼容，已经使用Firefox 2+、Safari […]

15 个最佳的 jQuery 表格插件

现如今，网站开发设计的需求会要求自动适应所有移动设备，即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid（流）和自适应性特点。 大多数网站设计要靠margins, guides, rows and columns等网格系统和布局来在网页上组织内容。网格设计常见于报纸和杂志中的文字图像排版设计。   可以创建网格布局的数量几乎是无限的，并且能够用无数种方式排布。比如：在等间距的两列，三列或者四列网格顶端有一个横跨的header，或者一整页的有着同样外观和感觉的方格。 有一些很好的JQuery网格布局插件能够大幅的缩短开发时间，如果你在你下一个项目中使用的话。这些网格插件能够优化瀑布流，使列的大小可调，滚动数据以匹配header，同样也可以添加数据网格，以及针对网格的一些动作比如：重新调整列的大小，分页，排序，行和列的样式等等。 下面是15款jQuery网格布局插件，能够让开发者和设计师在创建响应式布的网格布局时，同时拥有迷人的视觉效果，以及一个兼容所有浏览器和手持设备的响应式的外观。希望你们能够喜欢！   1.自由墙 自由墙是一个跨浏览器的响应式jQuery插件，它可以帮助你创建很多不同的网格布局：灵活布局，图片布局，网格，流体网格，metro风格布局还有用CSS3实现的动画效果和回调事件的瀑布流布局。自由墙是一站式的解决方案来在桌面，移动和平板上动态创建网格布局。 它是基于容器的宽(或高)以及单元的宽(或高)，同时它会创建一个虚拟的矩阵。扫描矩阵的每一个单元，找到空闲单元并让其为空白区域，之后将一个块元素插入。若果没有块可以匹配的话，它将缩放块来适应(这是选项之一) 出处   2. S Gallery S Gallery 是一款 jQuery 图片画廊插件 ，将图片显示在响应式网格。它的灵感来自于Sony’s产品页画廊 (Flash实现) 并完全实现了它的功能。当一个项目获得焦点或被点击时, 可以使用 prev-next 按钮 或使用键盘来浏览其他操作。 单击后会返回网格视图并有一个全屏选项(使用HTML5全屏API). 查看代码   3. Mason.js 创建一个动态列的网格布局（比如Pinterest）有许多javascript方案。虽然大多数都很棒，但有时，这些网格会含有缝隙或者锯齿边缘。Mason.js是一款致力于通过智能填充空隙，力图表现完美网格的jQuery插件。一个网格被创建出来，这款插件会计算空隙的位置并使用预定义的元素或者重复内容填充空隙。元素的大小，列/行的大小，断点以及布局是流式还是固定都是可以被重新定义的。 Source   4.jQuery.Shapeshift 有许多jQuery的插件可以创建一个照片分享样式的动态网格布局。jQuery.Shapeshift是一个正是这类插件的强大替代品，通过一个触摸动作，这些图片可以拖曳（需要使用jQuery UI）。拖曳可以影响网格布局，就像网格在需要的时候，会自动去填充空隙一样。这同样在触摸设备和响应式布局上有效。这个插件有许多灵活可变的参数，比如设置margin，启用/禁用拖曳，自定义动画等等。 Source   5. jQuery Nested Nested是一款可以生成多列没有空隙的网格布局的jQuery插件。这个插件为所有的元素创建一个矩阵，建立一个多列的网格，并尝试用记录的元素来填充所有空隙。其实有很多解决方案能够达到同样的效果。但是，Nested提供了一个小的动作：它能够重新调整网格底部的任何元素，以确保没有缝隙。它的用法也很简单，只需要给一个jQuery的函数指定容器元素就行。并且，提供了多种可选参数方便用户定制，比如启用/禁用动画，最少列数等 Source   6. Wookmark jQuery Plugin 拥有动态列的网格布局如此流行，并不仅仅是因为它们被用于图片分享的网站，更是因为对于不同大小的内容显示来说，这是一个非常棒的方式。Wookmark，Pinterest的替代品，发布了一个可以创建那样布局的jQuery插件，兼容所有的浏览器。目前，这个插件只提供了少量的可选项：容器元素，offset（垂直/竖直距离）和元素的宽度——就这些。在初始化时，它会自己获取窗口的大小并自动排布网格（当然，它也是响应式的布局）。 Source   Grid-A-Licious是一个jQuery插件，可以让你很容易的创建类似Pinterest的浮动表格布局。当然也有其他的插件能够完成这个功能，但Grid-A-Licious提供了更完善的响应式解决方案。不管什么尺寸的屏幕，还是什么设备，表格表现得都很完美，它都能实现浮动而不使用绝对定位。插件提供了自定义宽度、间隔和动画（速度，过渡时间，效果等等）的选项，并且它支持在表格前或后插入新项目，这对于动态布局来说是非常有用的。 Source   8. jPhotoGrid jPhotoGrid只需要图像和字幕的简单列表，就可以将其变成了可以浏览和放大照片的网格。这个插件几乎所有的样式都是靠CSS完成的。诀窍是通过浮动的列表项来对网格进行布局。而插件会做的第一件事，就是将这些都转换成绝对定位。这就是为什么这个插件可以放大单个图像，然后将其返回到原来的地方。 来源   9. Gridster Gridster是一个令人印象深刻的jQuery插件，是为了开发出一个类iGoogle的多列网格，可以拖动n行删除并重新排序。该插件只需要jQuery（不用jQuery UI），可以将任何给定的HTML构造成网格的部件。而且，不局限于最初加载的元素，它还可以动态的添加新元素和删除现有的元素。 来源   10. Photoset Grid PhotosetGrid是一个简单的jQuery插件，用来将图片基于Tumblr的图片集功能，整理成一个灵活的网格。插件最初用于Style Hatch Tumblr主题，以此来在一个响应式的布局中显示图片集，但他们后来扩展了它，并为我们发布了一个jQuery插件。 来源 11. Flex Flex是一个流式非对称的网格动画jQuery插件。你可以将鼠标放在瓦片上，就能看到它们渐渐扩大。 Flex是一个想法，灵感来自于Adidas.com的flash主页。 来源   12. Freetile […]