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 DetailsJavaScript库是一些预先编写好的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