10种AJAX/JavaScript特效实例让你的网站更吸引人

ゝ一世哀愁。 2022-06-18 02:24 214阅读 0赞

**1.[GreyBox][]**  
![greybox.jpg][]  
*　　GreyBox* 允许你以[模式窗口][Link 1]的形式运行其它网站(类似于弹出式窗口，但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接，但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话，这真的是一个很好的解决方案。使用GreyBox 非常简单。  
  
　　这里是关于GreyBox的关键页面:[下载页面][Link 2], [说明页面][Link 3], [实例][Link 4], [安装][Link 5],和 [高级用法][Link 6](如果你是JavaScript高手，看完这个页面中的一些技巧说明，你就能扩展它的函数库了)  
  
  
**2.[instant.js][]**  
![instant.jpg][]  
*　　instant.js* 特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。  
　　这个脚本技术可以用于在你的网站上有很多照片，但又不想一个个手动处理的情况。（也许你会使用批量处理，但那只是建立于单一的动作下的，如调整尺寸、裁剪等&\#8230;）  
  
**3.[mooTable][]**  
![mootable.jpg][]  
　　mooTable允许你为表格中的数据进行排序(不用刷新页面)，利用DOM替代数据库的请求的新式排序方法。使用简单，仅需轻微的配置即可。  
　　这个脚本库需要mooTools框架的支持，你可以在[这里下载][Link 7]。你还可以在[论坛中的mootools板块][mootools]寻找一些创建mooTable的方法，会有很多mootools开发者的反馈。  
  
**4.[FancyForm][]**  
![fancyform.jpg][]  
*　　FancyForm* 可以取代单调乏味的表单控件如单选按钮和复选框。基本的使用仅需两步:(1)在页面中调用JavaScript文件 (2)为你的表单控件指定类名，如复选框指定class=&\#8221;checked&\#8221; 或 class=&\#8221;unchecked&\#8221;，单选框指定class=&\#8221;selected&\#8221; 和 class=&\#8221;unselected&\#8221;。非常不显眼的javaScript.  
　　该脚本需要[mootools][Link 7]的支持(版本1.1)  
  
**5.[image menu][]**  
![image-menu.jpg][]  
　　image menu,使用phatfusion开发而成。非常漂亮的横向菜单，当你悬停在某个菜单项上时，图片就会扩展开。  
　　你可以使用这个技术为照片的隐藏部分使用蒙太奇效果，但当用户将鼠标悬停在上面是就会显示全部。  
　　该脚本需要[mootools][Link 7]的支持(版本1.1)  
  
**6.[AmberJack: Site Tour Creator][AmberJack_ Site Tour Creator]**  
![amberjack.jpg][]  
　　这是一个轻量级的[JavaScipt][]库，允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。  
　　您可以利用这个技术来演示如何让用户使用这个网站，用户只需要点击下一步的按钮，就能了解需要做的每一步。  
  
  
**7.[ImageFlow][]**  
![imageflow.jpg][]  
　　灵感来源于iPod的“coverflow”，ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。  
　　用户点击图片以后，会转向到现实清晰大图的网页。  
  
**8.[ShadowBox.js Media viewer][]**  
![shadowbox.jpg][]  
　　ShadowBox是&\#8221;完全使用JavaScipt编写的跨浏览器、跨平台、代码简洁且文档完整的媒体查看应用程序&\#8221;(怎么样?一口气说下来这么多优点。)  
　　ShadowBox区别于其它Model Box（如[Lightbox 2][]）的地方是，它还支持除图片以外的很多其它文件类型，如flash视频、内嵌式youtube视频、Apple.com预告片和网页(这样能让用户不用转到另一个页面就能完成登录、注册)。这是很有价值的脚本。  
  
**9.[TJPzoom 3 - image magnifier][]**  
![tjpzoom.jpg][]  
*TJPzoom*可以让你将某个高清图片的局部放大显示。按下并拖动鼠标的话，可以改变放大区域的尺寸。  
  
**10.[mootools Tips][]**  
![mootools-tips.jpg][]  
*　　mootools Tips*是mooTools框架的一部分，它可以让你为用户提供一个高度可配置的工具提示，当用户将鼠标悬停在某个链接或图片上时，一些关于这个元素的附加的提示信息就会在屏幕上显示出来。  
　　一些可以调节的方法:[CSS][] 样式(可以修改默认的黑背景白文字)、渐变速度、工具提示在屏幕上显示的风格、你希望工具提示显示多久。这个脚本需要[mootools][Link 7]框架的支持。  
  
英文原文:[10 JavaScript Effects to Boost Your Website’s Fanciness Factor][10 JavaScript Effects to Boost Your Website_s Fanciness Factor]  
翻译原文:[10种JavaScript特效实例让你的网站更吸引人][10_JavaScript]  
原载:[彬Go][Go]——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活

[GreyBox]: http://orangoo.com/labs/GreyBox/
[greybox.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/greybox.jpg
[Link 1]: http://javascript.about.com/library/blmodal.htm
[Link 2]: http://orangoo.com/labs/GreyBox/Download/
[Link 3]: http://orangoo.com/labs/GreyBox/Documentation/
[Link 4]: http://orangoo.com/labs/greybox/examples.html
[Link 5]: http://orangoo.com/labs/greybox/installation.html
[Link 6]: http://orangoo.com/labs/greybox/advance_usage.html
[instant.js]: http://www.netzgesta.de/instant/
[instant.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/instant.jpg
[mooTable]: http://joomlicious.com/mootable/
[mootable.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/mootable.jpg
[Link 7]: http://mootools.net/download
[mootools]: http://www.iteye.com/news/mootools
[FancyForm]: http://lipidity.com/fancy-form/#example
[fancyform.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/fancyform.jpg
[image menu]: http://www.phatfusion.net/imagemenu/index.htm
[image-menu.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/image-menu.jpg
[AmberJack_ Site Tour Creator]: http://amberjack.org/
[amberjack.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/amberjack.jpg
[JavaScipt]: http://blog.bingo929.com/category/technology/javascript
[ImageFlow]: http://imageflow.finnrudolph.de/
[imageflow.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/imageflow.jpg
[ShadowBox.js Media viewer]: http://mjijackson.com/shadowbox/
[shadowbox.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/shadowbox.jpg
[Lightbox 2]: http://www.huddletogether.com/projects/lightbox2/
[TJPzoom 3 - image magnifier]: http://valid.tjp.hu/tjpzoom/
[tjpzoom.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/tjpzoom.jpg
[mootools Tips]: http://demos.mootools.net/Tips
[mootools-tips.jpg]: http://blog.bingo929.com/wp-content/uploads/2008/12/mootools-tips.jpg
[CSS]: http://blog.bingo929.com/category/technology/css
[10 JavaScript Effects to Boost Your Website_s Fanciness Factor]: http://sixrevisions.com/rapid-development/10_ajax_effects_website_fanciness/
[10_JavaScript]: http://blog.bingo929.com/10-ajax-effects-website-fanciness.html
[Go]: http://blog.bingo929.com/