30个精挑细致的Ajax和Javascript 技巧

在这篇文章里面, 我们列出了30个精挑细致的ajax 和 javascript 技巧. 你可以用它们在你的下一次设计中达到一些视觉特效, 最棒的是, 这份名单里面收集的都是一些新鲜的Ajax和Javascript技朽, 在学习技巧的同时, 你也可以掌握一些最新的科技资讯.

下面的这些示例分别使用了jQuery, Mootools, Prototype 和 script.aculo.us , 每个示例也都有相应的DEMO演示.在浏览它们之前, 你也可以回顾一下帕兰之前发表的一些相关文章:

• 51+最佳jQuery教程和示例
• 37个更加出色的jQuery插件
• 45个新鲜出炉的jQuery插件
• 50多个强大的jQuery插件应用实例

1) Growl 2.0 with Mootools- Daniel Mota使用 Mootools创建了Growl 2.0 , 让我们可以轻松的集成我们的Web应用程序.

• Demo 演示
  
• 下载

2) Easiest Tooltip and Image Preview Using jQuery- 一个令人难以置信的简单的方法实现的提示效果，类似弹出气泡, 当鼠标悬浮在链接上时, 可以弹出提示或缩略图.

• Demo 演示
  
• 从这里下载

3) Sliding top panel using mootools- Antonio Lupetti向我们介绍如何使用mootools, 再通过几行简单的 CSS和Javascript代码来实现一个展开/闭合的滑动门效果.

• 下载该教程 点击这里

4) Sliding top panel using mootools- 滑动效果的顶部导栏 … 基于 jquery!

• Live Demo
• 下载 tutorial from Here

5) Create a Slick Tabbed Content Area using CSS & jQuery- 如何使用 html建立一个简单的Tab标签内容框 ，然后使用一些简单的JavaScript来实现滑动 特效. 基于jQuery

• Live Demo

6) Custom JavaScript Dialog Boxes- 该脚本目前主要提供四种对话框风格: 警报，警告，提示和成功。

• Live Demo
• 下载 tutorial from Here

7) Facebook Sliders With Mootools and CSS - 一个很简单的三滑块系统，允许用户通过滑杆来修改高度，宽度和透明度. 基于Mootools, 仿Facebook.

• Checkout the Live Demo

8 ) Making a Javascript Video Player- 如何创建一个纯JavaScript 的视频播放器.

• Checkout the Demos here.

9) Ajax mosaic builder- 一个Ajax效果的马赛克图片生成工具.

• Checkout the Demo here.

10) jQuery flipv()- 通过简单的方式实现的垂直文本效果.

• Checkout the Demo here.
• 下载 it from here.

11) Drag. Drop. Lock.- 一个简单的教程, 教你如何在PHP中创建出拖拽效果.

• Checkout the Live Demo

12) WebAppers Simple Javascript Progress Bar with CSS- 由 WebAppers 创建的一个醒目的进度条, 其灵感来源于 Bare Naked App

• Checkout the Live Demo
• 下载 it from here.

13) moowheel- 使用JavaScript和<canvas>对象，生成个性和优美的可视化数据显示。

• Checkout the Live Demo

14) noobSlide-一个流畅的 Mootools 幻灯片图像画廊展示脚本.

• Checkout the Demo here.

15) Mocha UI- Mocha 一个基于Mootools javascript 框架创建的Web应用程序. Mocha GUI 的组件使用canvas标签图型构建而成.

• Checkout the Demo here.

16) ddMenu- ddMenu是一个简单的基于MooTools的脚本, 用来创建你自己的文本导航菜单.

• Checkout the Demo here.
• 下载 it from here.

17) googleDrive- googleDrive是一个小小的google地图mash up应用, 可以让你在Google Maps上面驾驶一辆小小的汽车.

18) GlassBox- GlassBox是一个短小精悍的 Javascript 用户UI库, 结合 Prototype 和 Script.aculo.us 可以生成一些特效. 使用 GlassBox你可以创建透明边框, 多彩布局和类Flash的特效等等.

• Checkout the Demo here.
• 下载 it from here.

19) ProtoFlow- ProtoFlow是一个使用 Javascript脚本的封面循环展示特效. 它基于 Prototype, Scriptaculous 和 Reflection.js.使用

• Checkout the Demo here.
• 下载 it from here.

20) ASP.NET AJAX AutoComplete Control (Facebook look)- 一个基于 ASP.NET 语言的 AJAX 扩展, 可以附加任何文本框控制.

• Checkout the Demo here.
• 下载 it from here.

21) ADamnIT – JS error notification- 一个免费的JS报错脚本, 当你的网页出现 JS 错误的时候, 它会自动发送一封邮件向你报告.

• Checkout the Demo here.
• 下载 it from here.

22) Flexigrid- 一个轻量级但拥有丰富数据的网格脚本, 配合标题与栏目大小, 可以滚动数据，支持连接到一个基于XML的数据源, 支持使用AJAX加载内容。

• Checkout the Demo here.
• 下载 it from here.

23) prettyPhoto a jQuery lightbox clone- 一个 jQuery 的 类Lightbox灯箱效果的脚本, 可定制的功能比较丰富.

• Checkout the Demo here.
• 下载 it from here.

24) JavaScript Color Fading Script- 这个轻巧的JavaScript可以很容易的实现色彩过渡, 可以添加褪色效果到表格, DIV层以及更多元素. 并且你可以设置元素的背景，边框或文字颜色.

• Checkout the Demo here.
• 下载 it from here.

25) Rotator

• Checkout the Demo here.
• 下载 it from here.

26) Kotatsu – a simple html table generator- 一个新鲜的工具, 帮助你快速的创建表格.

27) jQuery virtual tour- 这个虚拟导航插件的最大特殊性是, 即使Javascript没有被激活, 同样可以运行, 只是少了一些特效.

• Checkout the Demo here.
• 下载 it from here.

28) Usable directory listings with a little Dojo-为目录列表创建一个简单的过滤浏览脚本.

• Checkout the Demo here.
• 下载 a zip of the header and .htaccess files here.

29) Cuzillion’- 该工具可让你测试出在浏览器中不同的技术性能, 再针对其进行优化，这些测试可以保存和共享到社交网站。

30) The Sliding date-picker- 一个滑动效果的日期拾取脚本.

• Checkout the Demo here.
• 下载 it from here.

英文原文:Exceptional Ajax/javascript Techniques (Recently Created)
翻译：帕兰映像

来源于 30个精挑细致的Ajax和Javascript 技巧 | 帕兰映像