Category Archives: JavaScript
2014 不能错过的 10+ 个 JavaScript 游戏引擎
在过去几年里，JavaScript 变得越来越流行，现在被认为是 Github 上面最受欢迎的编程语言。JavaScript 和 HTML5 这个流行的组合和 HTML5 的最新发展催生了各种 JavaScript 游戏引擎。这个组合允许开发者生成特别炫丽的游戏，比如动画，3D 图像等等。使用 HTML5 开发游戏的最重要的原因就是能适用于各种主流的设备。 在这片文章中，我们会谈论开发者们广泛使用的 10+ 个免费而又非常强大的 JavaScript 游戏引擎。这些游戏引擎都是经过精挑细选的，主要从近几年的维护，更新和持续改进等方面来进行选拔。以下就是我们挑选的结果： JsGameSoup JSGameSoup 是开源免费的游戏引擎，使用 JavaScript 和开发的 web 技术（HTML5，canvas等）来制作游戏。它几乎能在所有浏览器中运行，甚至包括了 iOS 浏览器。 Akihabara 是一系列的库和工具，可以预置创建 pixelated indie-style 8/16-bit era games ，使用 JavaScript ， HTML5 canvas 标签和一些标准 hooks 开发。 LimeJS LimeJS 是个 HTML5 游戏框架，使用它来制作能在桌面浏览器中快速运行的游戏，适用于所有主流的浏览器和触摸屏设备。LimeJS 包括各种函数和类，用来管理事件，时间线，形状和动画。 Enchant.js enchant.js 是个游戏引擎，同时也是个制作简单游戏和 HTML5 和 JavaScript 应用的框架。Enchant.js 发布于 2011 年，是个开源和免费的游戏引擎。 GMP GMP 是个 JavaScript 游戏引擎，用来创建基于 sqrite 的 2-D 游戏。它可以很容易就设计出最 retro 风格的街机游戏，同时也是很好的制作游戏的工具（比如 sudoku 和 gogopop）。GMP 拥有非常完整的文档，但是缺少良好的声音集成支持。 Gamequery GameQuery 是个开发 JavaScript 游戏的好工具，非常容易使用，只需要添加一些游戏相关的类。Gamequery 兼容各种浏览器： Firefox, Internet Explorer, Chrome, Safari, Webkit 移动版和 Opera。 […]
View Details
13 款最棒的 jQuery 图像 360° 旋转插件
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式。这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章。jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示，经常在电子商务网站上使用，帮助消费者更好的了解产品，从任意的一个角度观察欣赏。 在这篇文章中，我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件，这些插件都能进行 360 度图像旋转展示。希望大家能从中找到自己喜欢的，并应用在自己的网站上。 1. Reel Reel 是个已完成的项目，是个功能非常齐全的 jQuery 图像 360 度旋转插件。它利用新的技术使普通的图像标记变成一个全方位 360 度交互的对象电影，全景或者定格动画。在线演示 2. SpriteSpin Spritespin 是个 jQuery 插件，允许在网页上显示 sprite 动画。只需要用户提供一组图像，或者一系列无缝的 sprite 列表，就可以逐帧显示这些图像，然后生成动画。在线演示 3. The 360 Degree JavaScript Viewer The 360 degree Javascript viewer 是个 jQuery 插件，用来展示一个漂亮的 360 度图像旋转效果。在线演示 4. jQuery Panorama Viewer jQuery Panorama Viewer 能帮助用户嵌入全景图片到用户的网站上。需要达到这个效果，第一，用户需要包括最新的 jQuery 库，包括 jquery.panorama_viewer.js 和 panorama_viewer.css，然后把图片加入到 HTML 的“panorama”类中。支持的现代主流的浏览器：Chrome, Firefox 和 Safari （桌面和移动端）。在线演示 5. jQuery Threesixty jQuery Threesixty 是个很小的插件，用来构建类似 flash 的全景图像，或者是很自然的图像的 360 ° 视图展示。在线演示 6. […]
View Details
15 个免费的 CSS jQuery Tabs 插件
Tabslet jQueryUi Tabs IDTabs Tabulous. js ION Tabs Easy Tabs Tabify Smart Tabs Organic Tabs CSS3 jQuery folder tabs Responsive tabs JQuery Script Style your jQuery UI tabs How to create a slick tabbed content area CSS3 tabs with beveled corners Creating Content Tabs With Pure CSS via thedesignpixel from:http://www.oschina.net/news/49540/free-css-jquery-tabs-plugin-and-tutorials
View Details
20 款处理键盘事件的 JavaScript 库
键盘事件可以提高网站的易用性，提高用户与网站的交互体验，或者是页面需要通过键盘输入来触发事件。这些都非常有必要使用快捷键或者是键盘输入条目。 将这些事件处理整合到 HTML 文档中，通过 JavaScript 来定义相关的功能，是另一个非常好的方法，让 web 应用像桌面应用一样方便操作。接下来我们要介绍收集到的 20 款 JavaScript 处理键盘时间的库，帮助用户处理各种键盘事件，方便实用，好好欣赏吧：） Keypress Keypress 是个有着许多特别功能的输入捕捉库，它非常容易使用，有个极小的脚本（约9kb），而且没有任何依赖。这个库支持所有主流的浏览器和操作系统，但是没在非英文的键盘上测试过。 Mousetrap Mousetrap 是个没有外部依赖的独立库，它最小约为 1.9kb，Mousetrap 非常容易扩展，只要页面中包括 Mousetrap 和需要扩展的 JavaScript 库就可以了。 Mousetrap支持的浏览器有： Internet Explorer 6+, Safari, Firefox 和 Chrome。 jQuery Hotkeys jQuery.Hotkeys 允许用户在源代码中添加或者删除各种键盘事件，几乎支持任何组合键。只需要一行代码就可以绑定或者解绑快捷键。支持（Win/Mac/Linux）平台上 的浏览器： IE 6/7/8, FF 1.5/2/3, Opera-9, Safari-3 and Chrome-0.2。 Keymage Keymage 是用 JavaScript 实现的极小的处理快捷键绑定的库，它没有任何的依赖项，非常容易扩展，用户很容易就能使用它开发一个新的库。 KeyboardJS KeyboardJS 是个 JavaScript 库，用来绑定键盘组合键，不会有任何的键盘代码和键盘组合键冲突。它可以作为一个独立的库也可以作为一个 AMD 模块。它支持单一快捷键或者组合键，可以在任何地方使用。 kbNav kbNav 可以很方便的使用键盘来进行用户友好的网站导航。kbNav 快捷键会出现在用户点击的对象中。用户可以很方便的找到想要使用的快捷键。用户可以使用网站开发一些无意识的快捷键和一些行为的关联，消除记忆快捷键和行 为的麻烦。kbNav 只需要点击相应的键盘，按 Enter 就可以生效，而且快捷键可以包含字每和数字，用户可以为每个行为都制作相应的快捷键。 Keymaster.js Keymaster 是个简单的微型库，用来定义和分配 web 应用的各种快捷键。Keymaster 没有任何依赖项，可以完全独立使用。它支持任何的 JavaScript 库或者是框架。 Keymaster 可以在任何浏览器上定义 keyup 和 keydown 事件的快捷键。目前支持的浏览器有： IE (6+), Safari, Firefox 和 Chrome。 Jwerty jwerty 是个 […]
View Details
你应该了解的 5 个 JavaScript 调试技巧
我之前使用过用printf debugging，自此之后我用这种方法似乎总能更快地解决bug。 在某些情况下需要更好的工具，下面是其中的一些佼佼者，我敢肯定你会发现它们的有用之处： 1. debugger; 正如我之前提到的，你可以使用“debugger;”语句在代码中加入强制断点。 需要断点条件吗？只需将它包装它在IF子句中： if (somethingHappens) { debugger; } 只需记住在上线前移除。 2. 当节点变化时断开 有时DOM像有了自己的想法。当不可思议的变化发生时很难找到问题的根源。 Chrome开发人员工有调试这个问题的超级有用技能。这就是所谓的“Break on…”，你可以通过在元素选项卡上右键DOM节点找到它。 断点可以在节点被删除后设置，当节点的属性更改或者其子树中的节点变化时。 3. Ajax断点 XHR断点或我称作的Ajax断点，也允许当一个预期Ajax请求创建时断开。 当调试你的web应用的网络时这是个让人吃惊的工具。 4. 模拟不同的移动设备 Chrome增加了内置的移动设备模拟工具，这将简化你的日常工作。 选择任何非Console的选项卡找到它们，按键盘上的esc键并选择你想摸你的移动设备。 你当然不会得到一个真正的iPhone，但尺寸、触摸事件和agemt都会为你效仿。 5. 通过审核提升你的站点 YSlow是个伟大的工具。Chrome也在开发人员工具下包含一个称作Audits的类似工具。 使用快速审核一下你的网站，来获得有用实际的优化技巧。 还有什么呢? 没有这些工具我不能想象如何开发。当我发现新的后我会发布更多，敬请期待。 from:http://www.oschina.net/translate/5-javascript-debugging-tips-youll-start-using-today
View Details
20 款免费的 JavaScript 游戏引擎
使用 HTML5，CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏，比如：3D 动画效果，Canvas，数学，颜色，声音，WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任何现代化流行的设备上运行。 某些游戏引擎仅仅是一个抽象的层次，就简单处理一些或者更多的繁杂游戏开发任务；其他只是注重 asset 加载，输入，物理效果，音频，sprite 地图和动画，而且相当多样化。还有一些引擎架构极其简单，只包括一个 2D 水平的编辑器和调试工具。 大部分的游戏引擎都能提高游戏开发的效率，即使是创建全功能型的游戏。但是，也有一些开发者为了能更好的理解游戏的每个组件，喜欢从头开始创作。现 在基于 Javascript-HTML5 的游戏引擎也不少，这是好事，同时，也是个坏事，因为事实上大多数开发出来的产品都没人维护，或者即将停止维护。所以，选择某一游戏引擎需要仔细考虑的就 是该引擎在未来几年是否会继续维护，更新，进行功能增强。 在这篇文章中，我们经过各种资料探寻，测试，实际应用等方法，收集了专门提供给开发者的20 款免费的 JavaScript 游戏引擎， Enjoy! 1. Crafty craftyJS 个轻量级的，模块化 JavaScript 游戏引擎，包括了许多组件：动画，事件管理，重新划分区域，碰撞检测，sprite 等等。它支持所有类型的浏览器，比如 IE9。不需要 dom 操作和自定义绘图程序。 2. Quintus Quintus 引擎是个 HTML5 游戏引擎，模块化，轻量级，而且带有简洁的 Javascript 友好的语法。 Quintus 是一个易学，使用有趣的 JavaScript HTML5 游戏引擎，支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏，并在同一个页面上运行多个实例。 3. Gamequery gameQuery 是 个易于使用的 jQuery 插件，可以通过添加相关游戏的类来帮助开发 Javascript 游戏，自从它使用 DOM 操作代替了 Canvas gameQuery ，现在可以兼容大量的浏览器，即使是比较旧的版本：Firefox, Chrome, Internet Explorer, Safari, Safari for iOS, mobile versions of Webkit 和 Opera。 4. GMP GMP 是个杰出的制作基于 sprite ，2D 游戏的引擎。它可以很容易就设计出最 retro 风格的街机游戏，同时也是很好的制作游戏的工具（比如 sudoku 和 gogopop）。在线演示 5. lycheeJS lycheeJS 是个 JavaScript 游戏库，提供完整的原型解决方案和 HTML5 Canvas […]
View Details
25 个免费的 HTML5 CSS3 jQuery 下拉菜单
25 个免费的 HTML5 CSS3 jQuery 下拉菜单，有图有真相，看图更直观！ CSS3/Javascript Pure Dropdown Menu A simple dropdown menu to use on your navigation or sidebar menu. Download Subway – Red Line Tiny simple transparent looking dropdown. Download Dropy | A Simple SCSS & jQuery dropdown Just a simple dropdown using SCSS and jQuery. Download Solution for Long Drop Down Items A scrolling dropdown solution made for long list of categories. Download Dark and Light Dropdown Lists A minimal dropdown list made in pure css and css only. Download Navigation dropdown with unfold […]
View Details12个令人印象深刻的JavaScript和HTML5的内容呈现框架
随着网页开发的指数式增长，越来越多的人投身到其中并贡献了诸多精美的网站。这些伟大的网站也许不同于那些不同的商业视角并且它们可以在各种行业做出贡献。随着网站开发领域的迅速改变和成长，为了简化日常开发工作以及拟定良好的开发规范，很多开发人员引入新技术。如果我们从业务的角度来看，有许多不同类型的企业强烈需要在他们的网站上实现内容呈现。 内容呈现是一个表现总体印象的视觉细节的基本方式。基于这个目的各种不同的语言像Javascript，HTML5 都可将这些特性嵌入到网页钟来。但是手动做这项工作着实耗费时间，为了更好的完成这项工作，开发者提供了基于框架的灵活方式来将它应用与网页中。甚至最好的开源平台WorkPress同样提供了灵活的方式来在网页中使用内容呈现。 在这些框架和函数库的帮助下，内容呈现网页的制作变得更简单和方便了。现在在 web 上有很多 JavaScript/HTML5 的内容呈现框架，用来帮助创建现代化布局的内容呈现 web 页面。这些 JavaScript 和 HTML5 内容呈现框架是创建现代化浏览器演示文稿最简单的方式，也是 web 开发者能更好的开发 web 应用方式。让我们来看看下面要介绍的 30+ JavaScript/HTML5 内容呈现框架，欣赏完后不要忘记跟大家分享你的经验和最喜欢的框架或者函数库，说说你喜欢的理由哦：） 1) 内容呈现框架 – Deck.js Deck js 是给人印象最深刻，最高级的 HTML 内容演示框架之一，有着许多新的令人惊叹的功能和特性来展示用户的幻灯片。 2) 内容呈现框架 – Tacion.js Tacion js，是个 jQuery 移动端框架，帮助用户创建一个实时的内容演示文稿。 3) 内容呈现框架 – Fathom.js 这个内容呈现框架是用 CSS 风格的 HTML 来创建幻灯片放映模式，使用带有一些 jQuery 驱动的 javaScript 去控制幻灯片放映的效果。 4) 内容呈现框架 – Impress.js Impress js，这是带有迷人的界面风格和许多创造性功能的最让人难以忘怀的 HTML/javascript 内容呈现框架。 5) 内容呈现框架 – Reveal.js Reveal js，是个 HTML 内容呈现框架，提供现代化的滑块功能，帮助用户创建独特的幻灯片放映效果。 6) 内容呈现框架 – Presenteer.js 7) 内容呈现框架 – Jmpress.js jmpress 也是众所周知的让人印象深刻的内容呈现框架。 8) 内容呈现框架 – DZ Slides DZ Slides 是使用最新的 HTML5 和 CSS3 技术去创建用户的内容呈现框架。 9) 内容呈现框架 […]
View Details为开发者准备的 15 个最棒的 JavaScript 动画库
jQuery给各种效果带来了无限的可能性，他有着简单的、启发性的API，你可以利用它创建你能想到的、甚至你想象不到的效果（有赖于你的创造力和想象力）。 富有创造力的jQuery使用可以为网页设计带来丰富的动画效果，增强用户的视觉体验——显然，继续创建吸引人的网页特效可以为你创造更多的回头客，这些魔幻般的效果在以往只能用Flash实现。 这一次，我们想向你介绍一些jQuery动画方面的创新使用，让你的工程、网站和应用收益。 祝你愉快！ 1. Tween JS TweenJS 是一个简单的 Javascript 补间动画库。开发初衷是可以很好的集成 EaselJS 库，但又不依赖于或者限定于它。它支持根据数值对象的属性和 CSS 样式的属性进行补间动画。API 简单而强大，可以很容易的通过链接命令构造复杂的补间动画。 Tween JS 2. Jsanim jsAnim 是为网站所用的动画库，效果平庸，实现笨拙粗劣，牺牲了标准与亲和力，大小以至于达到庞大的 25k 字节。 Jsanim 3. Animo.js Animo.js 是个小巧但强大的管理 CSS 动画的工具。它的特点有：叠加动画，创建跨浏览器的模糊效果，动画完成后可执行回调函数。 Animo.js 4. Move.js Move.js 是一个小巧的JavaScript库，能使利用CSS3支持的动画变得非常简单和优雅。 Move.js 5. Collie Collie 是一个有助于使用 HTML5 创造高度优化的动画和游戏的JavaScript库。它可以运行在能够使用HTML5画布和DOM的PC和手机上。它可以稳定地处理使用渲染管线的多个对象，支持包括精灵动画和用户事件等的有用功能。能够稳定支持iOS和Android，并为每个平台以优化的方法呈现。也很容易对视网膜显示器提供反应。 Collie 6. Minified.js Minified.js是一个体积小(<8kB)功能强的客户端JavaScript库。它提供了类似于jQuery的功能(DOM操作、动画、时间、HTTP请求) 和其他功能(集合、日期&数字格式化、日期计算、模板)，并有着简单明了的API。 Minified.js 7. Rekapi Rekapi是一款JavaScript关键帧动画库。它提供了一套API让你可以定义关键帧动画并控制动画播放。Rekapi并未指定渲染行为。事实上，Rekapi的内核并为执行任何渲染操作。它提供了一个API来定义渲染器，标准的发行包包括HTML DOM和HTML5 2D Canvas渲染器模块。 Rekapi 8. Snap.svg SVG是建立互动的一个很好的方式，独立于分辨率的矢量图形会在任何屏幕看起来都很棒。Snap.svg 这个JavaScript库，使你的SVG资源使用起来就象用jQuery操作DOM一样容易。Snap.svg专为现代浏览器设计，因此支持最新的SVG特性，如遮蔽，裁剪，模式，完整的梯度，分组，和更多。 Snap.svg 9. Favico 想给你的网站图标 favicon 添加徽章、图片，甚至是视频吗？ Favico.js可以简单地为你的 favicon 图标添加动画的徽章，或从一个图像（视频，甚至是从你的网站的访问者的网络摄像头）飞快地创建 favicon。 Favico 10. Textillate.js Textillate.js 是一个针对 CSS3 文本动画的简单插件。它融合了一些很棒的库，成为一个易用的对任意文本应用CSS3动画的插件。 Textillate.js 11. Firmin Firmin 是一个 JavaScript 动画库，它使用 CSS 的转换和过渡功能来创造光滑的、带有硬件加速的动画的 Firmin 12. […]
View Details15 个可提升编码技能的 JavaScript 工具
JavaScript库是一些预先编写好的JavaScript文件集合，用来让JavaScript应用开发更加便捷，尤其是AJAX和其他web开发。JavaScript的最主要用途是编写HTML中嵌入的函数，对页面的DOM(Document Object Model)进行操作。 本文中我们整理了 15 个JavaScript工具，来帮助你提高编码技能，更快、更轻松地完成工作。以下JavaScript工具可以帮助你管理Javascript状态，压缩你的javascript代码，重构script代码结构，等等。我们希望这个工具列表方便而有用。如果你了解其他的javascript工具，请在评论中提出，我们期待你的建议。阅读愉快！ 1. JavaScript 状态管理器 Simple State Manager(SSM) 是一个为响应式网站设计的，轻量级而易用的JavaScript状态管理器。它不依赖任何JavaScript框架，是能让页面布局代码更整洁的良伴。你可以设置断点，然后打包全部的JavaScript从这个断点开始执行。一旦遇到了下一个断点，SSM会禁用之前的状态代码，触发执行新的状态代码（所以你不用手动切换）。这个管理器有完整的API，debugger和用于后续扩展的插件支持。 2. jsMini 如果你想快速而方便地压缩你的JavaScript或jQuery文件，用jsMini吧。只需复制粘贴你的源代码，选择基本压缩或是完全压缩，就能得到压缩好的代码。 3. CountUp.js CountUp.js 是一个无依赖，轻量级的JavaScript“类”，用来快速创建有趣的数字显示动画。尽管叫这个名字，countUp可以正数也可以倒数，取决于你传入的 startVal 和 endVal 参数。包括Bower和Component .json文件，并有coffeescript版本。 4. Grasp Grasp帮助你基于代码结构来查找、替换和重构JavaScript代码。它比普通的查找替换更为强大，让重构更方便，并且允许你执行一行的基本宏。 5. Gulp.js Gulp.js 是一款流式(streaming)项目build系统。它使用node.js的stream，主张代码优先于配置，因此使build流程更简单、直观。因为它以代码而不是配置为中心，gulp得以化繁为简，同时简单的工作仍然简单。 利用强大的node.js的stream，可以享受快速的build流程，不需向磁盘写入中间文件。Gulp 严格的插件指导原则保证插件保持简洁，让你得心应手。精简的API帮你迅速上手。从此build流程如同你想象的那样：一系列stream之间的pipe。 6. Orcrad.js Ocrad.js是一个简单的OCR程序，可以识别图片中的文字。它是Ocrad项目的纯JavaScript版，总体大约1MB，不依赖大规模训练。 7. Headroom.js Headroom.js是一个轻量级，高性能的JS widget (不依赖任何框架！) 帮你响应用户对页面的滚动。向下滚动时，header滑出界面；向上滚动时，header滑入回来。Headroom.js帮助你在恰当的时间将元素带入界面，其他时间让用户的注意力集中在页面内容上。应用headroom.js真的很简单。它有纯JS的API，以及可选的兼容jQuery/Zepto和AngularJS的插件. 8. Jiko Jiko 是一个先进和易于使用的JavaScript的模板引擎。它的目的是为JavaScript程序员提供一种能够使用和服务端的艺术模板引擎（如Jinja 和 Mako）一样强大的引擎来编写JS模板的途径。 9. FileAPI FileAPI 是一个庞大的几乎任何与文件有关的JavaScript工具的集合。它提供了单个/多重文件上传的很多功能：支持拖放，图像裁剪、缩放，应用过滤器，获取文件信息和其它一些功能。该工具是独立的，带有一个在服务器端实现处理行为的PHP类。同时，对于不支持（上传和相机）的浏览器可以快速回退。而且它有详细的文档。 10. Object Playground Object Playground 是一个能使JavaScript对象可视化和被实验的工具。它就在你的浏览器中运行，使用很方便。 11. Echo.js Echo 是一个独立的JavaScript图像延迟加载工具。Echo 运行很快，使用HTML5的 data-* 属性。它不支持IE8以下版本。echo.js使图像延迟加载变得很简单，而且压缩代码之后只有不到1KB，而且不依赖于jQuery/Zepto或其他JS库。 延迟加载是只当目标元素要显示在视图中时才加载其所需资源。它只是通过简单地改变图像的src属性就可以自动向服务器发起请求并得到该资源。这也是一个异步过程，有利于加载和浏览。 12. jsComplexity 想知道你的JavaScript代码有多复杂么？用Analysis运行自己看看吧。代码中复杂性存在的越多，出bug的机会越多，所以你所能做的就是简化代码来提升性能及可靠性。 13. Chance.js Chance是一个随机字符串、数字等的简约生成器，它能够帮助减少在编写自动化测试或其他任何需要随机场景时的单一性。Chance是个开源软件，在开发及商用均友好的MIT许可下发布。Chance在本网站上已加载，你可以打开你浏览器console试一下！ 14. Bookmarkfiy Bookmarkify 可以使你创建自己的书签脚本工具变得非常简单。只要命名你的书签脚本，然后输入它对应的要执行的代码，执行功能按钮，把结果收藏到书签中就可以了。（译者感觉对于一般比较简单的书签脚本来说完全是画蛇添足，对于某些特殊和代码量较大的脚本可以考虑） 15. David David 是一个让你能得到节点依赖概观的工具。它为每一个依赖的现状创建一个徽章标记来显示。你可以选择把它嵌入在您的网站上。 from:http://www.oschina.net/translate/javascript-tools-improve-your-coding-skills
View Details