今天的话题是如何改进自己网站的界面或提高网站的视觉体验,从而让用户记忆犹新。
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变
得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意
从头开发脚本的人阅读。
这里收集了10种强大
的且容易上手
的JavaScript特效来改进您的网页站界面,从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴,而且安装和使用都比较容易。
译者注:您还可以参考以下JavaScript/Ajax相关教程及资源:
《10个非常棒的Ajax及Javascript实例资源网站
》
《12种Javascript解决常见浏览器兼容问题的方法
》
《JavaScript编写的胸罩罩杯尺寸计算器
》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源
》
GreyBox
允许你以模式窗口
的形式运行其它网站(类似于弹出式窗口,但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接,但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话,这真的是一个很好的解决方案。使用GreyBox 非常简单。
这里是关于GreyBox的关键页面:下载页面
, 说明页面
, 实例
, 安装
,和 高级用法
(如果你是JavaScript高手,看完这个页面中的一些技巧说明,你就能扩展它的函数库了)
instant.js
特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。
这个脚本技术可以用于在你的网站上有很多照片,但又不想一个个手动处理的情况。(也许你会使用批量处理,但那只是建立于单一的动作下的,如调整尺寸、裁剪等…)
mooTable允许你为表格中的数据进行排序(不用刷新页面),利用DOM替代数据库的请求的新式排序方法。使用简单,仅需轻微的配置即可。
这个脚本库需要mooTools框架的支持,你可以在这里下载
。你还可以在论坛中的mootools板块
寻找一些创建mooTable的方法,会有很多mootools开发者的反馈。
FancyForm
可以取代单调乏味的表单控件如单选按钮和复选框。基本的使用仅需两步:(1)在页面中调用
JavaScript文件 (2)为你的表单控件指定类名,如复选框指定class=”checked” 或
class=”unchecked”,单选框指定class=”selected” 和 class=”unselected”。非常不显眼的javaScript
.
该脚本需要mootools
的支持(版本1.1)
image menu,使用phatfusion开发而成。非常漂亮的横向菜单,当你悬停在某个菜单项上时,图片就会扩展开。
你可以使用这个技术为照片的隐藏部分使用蒙太奇效果
,但当用户将鼠标悬停在上面是就会显示全部。
该脚本需要mootools
的支持(版本1.1)
这是一个轻量级的JavaScipt
库,允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。
您可以利用这个技术来演示如何让用户使用这个网站,用户只需要点击下一步的按钮,就能了解需要做的每一步。
灵感来源于iPod的“coverflow”,ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。
用户点击图片以后,会转向到现实清晰大图的网页。
ShadowBox是”完全使用JavaScipt编写的跨浏览器、跨平台、代码简洁且文档完整的媒体查看应用程序”(怎么样?一口气说下来这么多优点。)
ShadowBox区别于其它Model Box(如Lightbox 2
)的地方是,它还支持除图片以外的很多其它文件类型,如flash视频、内嵌式youtube视频、Apple.com预告片和网页(这样能让用户不用转到另一个页面就能完成登录、注册)。这是很有价值的脚本。
TJPzoom
可以让你将某个高清图片的局部放大显示。按下并拖动鼠标的话,可以改变放大区域的尺寸。
mootools Tips
是mooTools框架的一部分,它可以让你为用户提供一个高度可配置的工具提示,当用户将鼠标悬停在某个链接或图片上时,一些关于这个元素的附加的提示信息就会在屏幕上显示出来。
一些可以调节的方法:CSS
样式(可以修改默认的黑背景白文字)、渐变速度、工具提示在屏幕上显示的风格、你希望工具提示显示多久。这个脚本需要mootools
框架的支持。
英文原文:10 JavaScript Effects to Boost Your Website’s Fanciness Factor
翻译原文:10种JavaScript特效实例让你的网站更吸引人
(暴风彬彬)
如果您对前端开发技术很感兴趣,欢迎来我的博客一同交流:
原载:彬Go
——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
分享到:
相关推荐
10种AJAX JavaScript特效让你的网站更吸引人 AJAX JavaScript特效 网站 web开发 javaweb
ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效
Ajax简介 JavaScript基础 DOM基础 基于DOM的Web应用示例
最新最权威的ajax技术在这里变得是那么的简单好学好用,谢谢您的支持和使用。
快速创建复杂图形应用.是AJAX严重缺位的功能之一。不过可以找到不少替代技术,虽然它们远非完美,但只要你注重实效,要求不要太高,也还是可以帮助我们完成工作的
JavaScript网页特效\Ajax+CSS滑动门特效(点击式)
Ajax Daddy收集了大量漂亮的Web2.0工具,其中一个使用的功能就是,在你把某个Ajax/Javascript实例应用在自己的网站上之前,你可以在它上面先看看效果演示。 3.Mini Ajax MiniAJAX 是一个新生的网站,收集了...
ajax 纯JavaScript demo ajax示例
AJAX各种特效演示
JavaScript特效集锦:图片矩阵中单个图片放大效果--Ajax;JavaScript 图片滚动;JavaScript 由左向右的图片渐变过渡;图片旋转构成3D圆环的展示特效……
征服Ajax-javascript部分 ajax javascript课件 征服Ajax-javascript部分 ajax javascript课件
spket-1.6.18——Javascript/Ajax/ExtJS开发插件 这款插件主要用于为JavaScript开发的用户提供支持,方便开发人员快速进行开发。 spket-1.2以后的版本好像是收费的,本资源已破解,所以您无需为使用的期限而担忧了。
本人从事php程序的开发工作,设计自主的公司oa系统.其中用到的客户端与服务器交互的程序供大家学习下载,希望对初学者有帮助,高手可以指教.tmp.rar文件,将其释放到web服务器上.如果没有php支持,test4按钮是不能使用的.
javascript网页特效108个 http://bbs.esiyang.com收集的. Javascript 3D相册 图片轮换效果总结 Javascript 3D相册 多样化摺叠菜单 一个很酷的登陆效果! WINDOWS脚本技术大全 新浪...
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及 Google Maps 出现后才...
JavaScript基础、JavaScript语法、JavaSctipt编程、页面交互信息的实现、Ajax客户端技术、jQuery框架、Ext JS框架和JavaScript调试的利器Firebug,以及使用iQuery实现在线留言板系统和一些门户网站的特效。...
* myAjax.open("http://www.ttzx.com:88/ajax/re.php",functionName); * myAjax.send(); * * 例:2:POST * var myAjax=new Ajax(); * myAjax.open("http://www.ttzx.com:88/ajax/re.php",functionName); * myAjax....
JavaScript语言与Ajax应用(第二版)-源代码-董宁-51704128
Ajax实例 Ajax特效+mySQL数据库
AJAX 指异步 JavaScript...通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。 AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)。 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。