资讯频道 → Web前端
阅读更多

94顶
0踩

Web前端

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

2008-12-12 19:08 by 见习记者 skar9363 评论(28) 有28547人浏览
JavaScript Ajax

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

　　今天的话题是如何改进自己网站的界面或提高网站的视觉体验，从而让用户记忆犹新。
　　我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读。
　　这里收集了10种强大的且容易上手的JavaScript特效来改进您的网页站界面，从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴，而且安装和使用都比较容易。


您还可以参考以下JavaScript/Ajax相关教程及资源:
《10个非常棒的Ajax及Javascript实例资源网站》
《12种Javascript解决常见浏览器兼容问题的方法》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》
 
1.GreyBox

　　GreyBox 允许你以模式窗口的形式运行其它网站(类似于弹出式窗口，但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接，但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话，这真的是一个很好的解决方案。使用GreyBox 非常简单。

　　这里是关于GreyBox的关键页面:下载页面, 说明页面, 实例, 安装,和 高级用法(如果你是JavaScript高手，看完这个页面中的一些技巧说明，你就能扩展它的函数库了)


2.instant.js

　　instant.js 特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。
　　这个脚本技术可以用于在你的网站上有很多照片，但又不想一个个手动处理的情况。（也许你会使用批量处理，但那只是建立于单一的动作下的，如调整尺寸、裁剪等…）

3.mooTable

　　mooTable允许你为表格中的数据进行排序(不用刷新页面)，利用DOM替代数据库的请求的新式排序方法。使用简单，仅需轻微的配置即可。
　　这个脚本库需要mooTools框架的支持，你可以在这里下载。你还可以在论坛中的mootools板块寻找一些创建mooTable的方法，会有很多mootools开发者的反馈。

4.FancyForm

　　FancyForm 可以取代单调乏味的表单控件如单选按钮和复选框。基本的使用仅需两步:(1)在页面中调用JavaScript文件 (2)为你的表单控件指定类名，如复选框指定class=”checked” 或 class=”unchecked”，单选框指定class=”selected” 和 class=”unselected”。非常不显眼的javaScript.
　　该脚本需要mootools的支持(版本1.1)

5.image menu

　　image menu,使用phatfusion开发而成。非常漂亮的横向菜单，当你悬停在某个菜单项上时，图片就会扩展开。
　　你可以使用这个技术为照片的隐藏部分使用蒙太奇效果，但当用户将鼠标悬停在上面是就会显示全部。
　　该脚本需要mootools的支持(版本1.1)

6.AmberJack: Site Tour Creator

　　这是一个轻量级的JavaScipt库，允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。
　　您可以利用这个技术来演示如何让用户使用这个网站，用户只需要点击下一步的按钮，就能了解需要做的每一步。


7.ImageFlow

　　灵感来源于iPod的“coverflow”，ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。
　　用户点击图片以后，会转向到现实清晰大图的网页。

8.ShadowBox.js Media viewer

　　ShadowBox是”完全使用JavaScipt编写的跨浏览器、跨平台、代码简洁且文档完整的媒体查看应用程序”(怎么样?一口气说下来这么多优点。)
　　ShadowBox区别于其它Model Box（如Lightbox 2）的地方是，它还支持除图片以外的很多其它文件类型，如flash视频、内嵌式youtube视频、Apple.com预告片和网页(这样能让用户不用转到另一个页面就能完成登录、注册)。这是很有价值的脚本。

9.TJPzoom 3 - image magnifier

TJPzoom可以让你将某个高清图片的局部放大显示。按下并拖动鼠标的话，可以改变放大区域的尺寸。

10.mootools Tips

　　mootools Tips是mooTools框架的一部分，它可以让你为用户提供一个高度可配置的工具提示，当用户将鼠标悬停在某个链接或图片上时，一些关于这个元素的附加的提示信息就会在屏幕上显示出来。
　　一些可以调节的方法:CSS 样式(可以修改默认的黑背景白文字)、渐变速度、工具提示在屏幕上显示的风格、你希望工具提示显示多久。这个脚本需要mootools框架的支持。

英文原文:10 JavaScript Effects to Boost Your Website’s Fanciness Factor
翻译原文:10种JavaScript特效实例让你的网站更吸引人
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
来自: 彬Go
94
顶
0
踩
评论 共 28 条 请登录后发表评论
28 楼 g616265424 2012-03-06 16:56
我喜欢第五个的图片效果，看着很喜欢
27 楼 qpshenggui 2011-09-22 11:11
goddy128 写道
的确很不错~~~

26 楼 zhameng 2010-06-08 07:08
从介绍上来看，在很多地方都用得上。具体情况怎么样，要等我试验一下才知道！
25 楼 yyh84yangtao 2009-07-25 16:39
好贴 很强，支持楼主分享精神！
24 楼 evanzeng 2009-02-17 10:33
嗯
ithurricane 写道

牛的，顶

23 楼 lzy83925 2008-12-18 16:54
image menu  很喜欢 呵呵
22 楼 joeyhacker 2008-12-17 13:52
有点像extjs
21 楼 xianglin 2008-12-16 10:25
是个好东西。。
20 楼 lovefly_zero 2008-12-15 11:53
谢谢
19 楼 superxielei 2008-12-14 22:20
做web前端开发必会的东西。
18 楼 cats_tiger 2008-12-14 21:50
Ivan_Pig 写道

扫了一眼JQuery，再扫了一眼mootools。发现还是mootools看着顺眼。

扫了一眼你能知道什么
17 楼 Ivan_Pig 2008-12-14 21:24
扫了一眼JQuery，再扫了一眼mootools。
发现还是mootools看着顺眼。
16 楼 hyogacs 2008-12-14 17:30
谢谢楼主收集，辛苦了，我做项目正好用的到！
15 楼 sunwine 2008-12-14 11:45
好像在企业管理软件中都不怎么用得上
14 楼 babubabu3 2008-12-14 11:12
非常好，支持啊
13 楼 stefenjun 2008-12-14 03:04
很强大。
顺便顶MOO
12 楼 terryang 2008-12-13 16:55
再顶试试看？？？
11 楼 liyao20050101 2008-12-13 14:28
牛，都被你收藏了
10 楼 千山我独行 2008-12-13 13:38
非常有用，全收了！
9 楼 suan2046 2008-12-13 13:18
不错，有点的可以 拿来使使

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • win98ddk.chm win98ddk.chm

    win98ddk.chm win98ddk.chm win98ddk.chm

  • DDK驱动安装方式

    1、采用DriverMoniter安装。 2、采用InstDrv安装。 3、驱动加载完成后，可以在设备管理器中查看驱动。注意选择 ”显示隐藏设备“

  • Win10x64-WDM设备驱动开发入门 - 第六章 VMware-Win10x64+WDK10+VS2015/2019环境搭建与双机调试

    VMware--Win10x64+WDK10+VS2015/2019环境搭建与双机调试1、驱动程序的开发语言选择调用约定运行时函数的调用2、配置驱动开发环境1--vs2015+SDK+WDK10查看 win10 的版本如何下载 sdk如何下载 wdk安装 Visual studio 2015安装 sdk安装 wdkWin10 驱动程序示例Vmware--Win10x64创建串口启用系统保护3、配置驱动开发环境2--vs2015+SDK+WDK10虚拟机中安装 WDK Test Target Setup xx

  • DDK是什么,驱动是否都要用DDK写

    准备开始window下的驱动开发了。先转个文章热身热身，学前班。  DDK是什么,驱动是否都要用DDK写   DDK是什么,驱动是否都要用DDK写 收藏 DDK是Device Development Kit，设备开发包的意思。如果你想开发一个设备驱动程序，如显卡驱动程序，就必须使用DDK。DDK没有包括在VC++中，其主页为http://www.microsoft.com/

  • WDM驱动程序开发之环境配置篇

      一个星期前郭老师给我布置了一项任务：开发我们自己设计的一块板子的PCI设备驱动，并给我指出了方向，具体说就是“三步走”战略：（1）入门。熟悉基于DriverStudio开发环境的设备驱动开发，同时侧面了解PCI设备驱动程序的相关知识。（2）进阶。运用纯DDK进行驱动开发，着重于学习别人的实例，并能熟练进行调试和修改。（3）实战。深入研究PCI总线标准，结合具体的电路板特性开发出一套

  • VC++中构建WDM开发环境

    WDM（Win32 Driver Model），即Win32驱动程序模型，是Microsoft力推的全新驱动程序模式，旨在通过提供一种灵活的方式来简化驱动程序的开发，在实现对新硬件支持的基础上减少并降低所必须开发的驱动程序的数量和复杂性。　　目前，用于WDM驱动程序开发的主要工具是Microsoft公司提供的DDK(Driver Development Kit)，其中包含许多内核态函数及数

  • 驱动开发环境搭建

    本节内容 驱动开发环境配置 课程内容： 配置VS2010,使之可以开发驱动程序 前提： <1> 正确安装VS2010 <2> 正确安装WDK 7600 1、新建VC空项目 2、打开配置管理器，添加一个驱动的活动项，确定，如图： 复制内容到新创建的属性文件中，复制文件参考： DriverProperty.props <?xml version="1.0" encoding="utf-8"?> <Project ToolsVersion="4.0

  • 驱动知识

    目前，由于需要支持新的业务和新的PC外部设备类型对驱动程序开发造成了新的挑战。新型总线增加了设备的数量和对设备驱动程序的需求。设备上各种功能的不断增加使驱动程序的开发变得越来越复杂。同时，快速反应的交互式应用程序要求将软件和硬件紧密的结合在一起。1997年，在用于Windows 95和Windows NT的统一的Win32驱动程序模型（WDM）有了进一步的发展，将这些因素全部考虑在内。WDM允许使

  • DDK开发介绍

    本篇我们介绍开发之前的准备工作，包括开发环境准备、预备知识。开发环境准备对于开发WDM驱动程序来说，我们有以下三个常用组合：1．    直接使用Windows DDK2．    使用DriverStudio3．    使用Windriver下面我们分别比较三种方式的优缺点。第一种：，开发难度大一些，而且有很多烦琐的工作要作，大部分都是通用的基础性的工作。但如果选用这种方式的话你将对整个体系结构会有

  • 华为Atlas500 DDK安装环境的搭建

    1、官网上下载有关DDK安装包软件压缩包进行解压并上传至虚拟机上 #创建目录 mkdir /home/ubuntu/Atlas500_DDK #解压DDK包到目录 tar -zxvf IES_DDK_B020.tar.gz -C /home/ubuntu/Atlas500_DDK/ #解压交叉编译工具并且安装交叉编译链 sudo tar -zxvf Euler_compile_env_cross.tar.gz -C /home/ubuntu/Atlas500_DDK/toolchains/ vim /etc

  • win7上安装DDK，SDK。。

    今天在学习无线Access Point检测的时候，用到了微软的SDK和DDK，不得不安装这两个庞大的东西。 DDK装起来很方便，没有费什么波折，微软的东西还真是大，动辄一两个G的大小，安装完SDK，加上先前的VS2005和msdn，我的硬盘空间顿时捉襟见肘了，还是怀念linux的开发，一个vim就够了，man帮助翻起来也特方便。 装SDK的时候遇到了不小的麻烦，用VSDK_sfx.exe安装，

  • C++Windows之WDM驱动程序开发（实战篇）上

    详解Windows驱动程序的发展由来，实战NT驱动、WDM驱动程序的开发制作，让学员掌握驱动开发的全部流程，整体架构，快速学会Windows驱动程序开发

  • 创建一个基础WDM驱动，并使用MFC调用驱动

    首先参考文章：如何使用WinDbg和Virtual Box进行Windows驱动debug，搭建开发环境。创建一个Empty WDM项目，在solution下添加一个MFC项目： 其中FirstDriver是一个简单的WDM驱动项目，而App是一个MFC程序，用于调用驱动。Source.c是驱动源码： 程序完成了几项工作：MFC应用程序 界面： 一共4个按钮，分别执行device open/close，以及通过IO发送和接收数据。 需要注意的是，这里要使用DeviceIoControl函数用于和devi

  • 微软视窗驱动模型（WDM）编程指南

    第一章           开始一个驱动项目 在本章中我将对驱动开发的历史作一个简要的回顾。从80年代中期起，我开始涉足个人计算领域，那时也正是IBM刚刚开始出售搭配着MS-DOS操作系统的个人电脑。而就在今天，我们也依然能感受到当年IBM和Microsoft的决定所带来的影响。所以一定的历史背景知识会让你更好的理解如何编写驱动程序。        在本章中，我将简要地介绍一下可以运行

  • 《Windows内核编程》---WDM驱动程序的基本结构和实例

    WDM驱动的基本结构： WDM驱动模型是建立在NT式驱动程序模型基础之上的。对于WDM驱动程序来说，一般都是基于分层的，即完成一个设备的操作，至少要由两个驱动设备共同完成。   1）物理设备对象和功能设备对象 物理设备对象（Physical Device Object，PDO）和功能设备对象（Function Device Object，FDO）的关系是“附加”与“被附加”的关系。 当P

Global site tag (gtag.js) - Google Analytics