Category Archives: Frontend
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网页背景缩放示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body style="background-image: url(http://ww4.sinaimg.cn/large/7a09523bgw1edljfnqcz7j20zk0k0wld.jpg); background-attachment: fixed; background-size: cover; -webkit-background-size: cover; background-position: 50% 0px; background-repeat: initial initial;"> </body> </html>
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禁止浏览器缓存
html: <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-store, must-revalidate"> <meta http-equiv="expires" content="wed, 26 feb 1997 08:21:57 gmt"> <meta http-equiv="expires" content="0"> asp response.expires=0 response.addheader("pragma","no-cache") response.addheader("cache-control","no-store, must-revalidate") php header("expires: mon, 26 jul 1997 05:00:00 gmt"); header("cache-control: no-store, must-revalidate"); header("pragma: no-cache"); jsp： response.addheader("cache-control", "no-store, must-revalidate"); response.addheader("expires", "thu, 01 jan 1970 00:00:01 gmt"); 转自：http://www.oschina.net/code/snippet_81226_7660
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 Details30 个免费的响应式 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 […]
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 Details20 个具有惊艳效果的 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 […]
View Details