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

我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的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特效实例让你的网站更吸引人

原文地址:https://www.cnblogs.com/zytrue/p/8494431.html

时间: 2024-10-20 06:51:01

10种JavaScript特效实例让你的网站更吸引人的相关文章

JavaScript特效实例005-控制弹出窗口居中显示

实例005                控制弹出窗口居中显示 实例说明 点击页面上的按钮,弹出窗口,并将窗口居中显示. 技术要点 本例首先应用JavaScript中的window对象的open()方法,打开指定大小的新窗口,然后通过screen对象,获取屏幕分辨率,再根据获取的值通过window对象的moveTo()方法,将新窗口移动到屏幕居中位置. moveTo()方法将窗口移动到指定坐标(x,y)处,其语法格式如下. window.moveTo(x,y) 其中,参数x,y表示窗口移动到的位

JavaScript特效实例001-打开新窗口显示广告信息

实例001                 打开新窗口显示广告信息 实例说明 本实例要在窗口每次被加载的时候弹出一个广告对话框. 技术要点 本实例主要应用JavaScript的window对象. window对象的常用方法 方法 说明 alert() 弹出一个警告对话框 confirm() 在确认对话框中显示指定的字符串 prompt() 弹出一个提示对话框 close() 关闭被引用的窗口 focus() 将被引用的窗口放在所有打开窗口的前面 open() 打开新浏览器窗口并且显示由URL或名

JavaScript特效实例004-自动关闭的广告窗口

实例004                  自动关闭的广告窗口 实例说明 当网页运行一定的时间后,自动关闭网页上指定的广告窗口. 技术要点 本实例主要应用window对象的setTimeout()方法和close()方法来实习.window对象的setTimeout()方法用于延迟执行某一操作. 实现过程 (1)要关闭的广告窗口. new.html <html> <head> <title>打开新窗口显示广告信息</title> <style typ

JavaScript特效实例003-通过按钮创建窗口

实例003                     通过按钮创建窗口 实例说明 点击按钮创建窗口 技术要点 主要是使用window是对象的open()方法来创建和调用其他窗口. 实现过程 1.制作用于点击按钮打开的窗口广告页面 <pre name="code" class="html"><html> <head> <title>打开新窗口显示广告信息</title> <style type="

JavaScript特效实例002-定时打开窗口

实例002                                  定时打开窗口 实例说明 本实例要在指定的时间后打开窗口. 技术要点 主要应用window对象setTimeout()方法实现定时打开窗口. setTime()方法的语法格式如下. <span style="font-size:14px;">setTimeout(function,milliseconds)</span> 参数说明如下. function:要调用的JavaScript自定

JavaScript特效实例011-弹出全屏显示的网页模式对话框

实例011                    弹出全屏显示的网页模式对话框 实例说明 弹出全屏显示的网页模式对话框,用户关闭之前不能浏览网站的其他内容. 技术要点 本实例主要应用screen对象的width.height属性和window对象的showModalDialog()方法实现.其实还有一种方法打开网页对话框,即showModelessDialog()方法. 使用showModalDialog()与showModelessDialog()方法的区别在于,showModalDialog

JavaScript特效实例014-页面自动滚动

实例014                                页面自动滚动 实例说明 本实例实现在打开页面,当页面出现纵向滚动条时,页面中的内容将从上向下进行滚动. 技术要点 本例主要是使用window对象的scroll()方法指定窗口的当前位置.下面对scroll()方法进行详细说明. scroll()方法的语法格式: scroll(x,y); 参数说明如下. 1.x:屏幕的横向坐标 2.y屏幕的纵向坐标 功能:指定窗口滚动坐标的位置. 实现过程 用于实现功能的主页面index.h

JavaScript特效实例012-网页拾色器

实例012                             网页拾色器 实例说明 在网站中经常需要用户自定义颜色来显示某些信息.这可以在网页添加一个拾色器来实现. 技术要点 在本实例中仅使用216种浏览器安全的颜色,即所谓的Netscape色块.这216种颜色分别代表0.51.102.153.204这5个颜色值以及每一种原色(即红.绿.蓝).这些十进制数值对应的十六进制数分别为0x00.0x33.0x66.0x99.0xCC和0xFF.在HTML的颜色属性中黑色是#000000,纯红色是

JavaScript特效实例013-日期选择器

实例013                              日期选择器 实例说明 弹出日期选择器来供用户来选择日期. 技术要点 本例主要使用window对象的showModalDialog()方法实现. 实现过程 (1)用来弹出日期选择器的主页面.点击图片弹出日期选择器,然后在文本框输出选择的日期. <!DOCTYPE html> <html> <head> <title>日期选择器</title> <meta charset=&