`
xxmavetti
  • 浏览: 18377 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

10种JavaScript特效实例

阅读更多

这里收集了10种强大 的且容易上手 的JavaScript特效来改进您的网页站界面,从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴,而且安装和使用都比较容易。

 

1.GreyBox

JavaScript-greybox

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

 

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

2.instant.js

JavaScript-instant

  instant.js  特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。

  这个脚本技术可以用于在你的网站上有很多照片,但又不想一个个手动处理的情况。(也许你会使用批量处理,但那只是建立于单一的动作下的,如调整尺寸、裁剪等…)

3.mooTable

JavaScript-mootable

  mooTable允许你为表格中的数据进行排序(不用刷新页面),利用DOM替代数据库的请求的新式排序方法。使用简单,仅需轻微的配置即可。

  这个脚本库需要mooTools框架的支持,你可以在这里下载 。你还可以在论坛中的mootools板块 寻找一些创建mooTable的方法,会有很多mootools开发者的反馈。

4.FancyForm

JavaScript-fancyform

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

  该脚本需要mootools 的支持(版本1.1)

5.image menu

Javascipt-image-menu

  image menu,使用phatfusion开发而成。非常漂亮的横向菜单,当你悬停在某个菜单项上时,图片就会扩展开。

  你可以使用这个技术为照片的隐藏部分使用蒙太奇效果,但当用户将鼠标悬停在上面是就会显示全部。

  该脚本需要mootools 的支持(版本1.1)

6.AmberJack: Site Tour Creator

JavaScript-amberjack

  这是一个轻量级的JavaScipt 库,允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。

  您可以利用这个技术来演示如何让用户使用这个网站,用户只需要点击下一步的按钮,就能了解需要做的每一步。

7.ImageFlow

javascript-imageflow

  灵感来源于iPod的“coverflow”,ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。

  用户点击图片以后,会转向到现实清晰大图的网页。

8.ShadowBox.js Media viewer

shadowbox

  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特效实例让你的网站更吸引人

分享到:
评论

相关推荐

    JavaScript网页特效实例大全 书籍源码

    在本书的源码中,我们可以找到关于JavaScript特效的各类实例,这些特效包括但不限于: 1. **页面加载动画**:利用JavaScript控制元素的显示和隐藏,实现页面加载时的过渡效果,提升用户体验。 2. **导航菜单**:...

    javascript网页特效实例大全

    1. **图片轮播**:图片轮播是一种常见的JavaScript特效,它允许用户通过自动或手动切换来查看多张图片。这种功能常用于展示产品或服务,使网站内容更加丰富和动态。 2. **下拉菜单**:下拉菜单在网页导航中非常常见...

    javascript 小特效实例

    总之,JavaScript特效实例是提升网页互动性和吸引力的重要工具。通过对这些实例的学习,你能够熟练掌握JavaScript的基本技巧,从而在网页开发领域更加游刃有余。不断实践,结合理论知识,你将能够创造出更多富有创意...

    JavaScript精彩网页特效实例精粹

    以上仅为部分JavaScript特效实例,通过学习和实践这些实例,开发者不仅能掌握JavaScript的基本语法和特性,还能深入理解如何利用JavaScript与CSS、HTML协同工作,创建交互性更强的网页。在不断探索和尝试中,你将...

    JavaScript特效实例

    JavaScript特效实例是初学者探索和学习前端开发领域中动态效果创建的一个重要部分。JavaScript作为一种强大的客户端脚本语言,被广泛用于网页的交互性和视觉表现。本文将深入探讨JavaScript特效实例中的核心概念、...

    javaScript特效实例+技巧

    "javaScript特效实例+技巧"这个主题涵盖了JavaScript在实际开发中的各种实用技巧和效果实现,对于提升前端开发效率具有重要作用。 1. **JavaScript特效实例**: - JavaScript特效包括但不限于:滑动菜单、轮播图、...

    JAVASCRIPT网页特效实例

    网页特效代码,很实用的JAVASCRIPT资源

    JavaScript精彩网页特效实例精粹大全

    "JavaScript精彩网页特效实例精粹大全"是一份集合了众多JavaScript特效实践的资源,对于想要提升网页设计水平的人来说是不可多得的学习资料。 这份资源涵盖了JavaScript在网页特效制作中的各种应用,包括但不限于:...

    上百个JavaScript特效实例

    这个"上百个JavaScript特效实例"的资源集合是开发者学习和提升JavaScript技能的理想材料。以下将详细介绍其中可能涵盖的一些重要知识点: 1. **DOM操作**:JavaScript能够通过Document Object Model(DOM)来操作...

    javascript特效实例100

    "javascript特效实例100"这个主题涵盖了JavaScript在网页特效制作中的多种应用,包括但不限于动画、用户交互、页面变换等多种场景。这些实例旨在帮助开发者理解和掌握JavaScript的基本语法以及在实际项目中的应用...

    javascript网页特效实例大全.zip

    javascript网页特效实例大全.zip

    JavaScript特效实例集

    JavaScript特效实例集是针对网页动态效果开发的一系列代码示例,主要使用JavaScript这一脚本语言实现。JavaScript,简称JS,是Web开发中的核心技术之一,它主要用于网页交互、数据处理和视觉效果的创建。本实例集...

    Javascript特效实例大全

    在"Javascript特效实例大全"中,我们将会探索40多个精彩的JavaScript特效,这些实例涵盖了从基础到高级的各种应用,旨在帮助开发者提升网站的用户体验和视觉吸引力。 1. 弹出窗口:弹出窗口是JavaScript中常见的...

    JavaScript特效实例.rar

    "JavaScript特效实例"这个压缩包很可能包含了多个示例代码,用于展示JavaScript如何实现各种视觉效果。 1. **动画效果**:JavaScript可以创建平滑的页面滚动、淡入淡出、滑动门、旋转、缩放等动画效果。例如,使用`...

    JavaScript网页特效实例大全.rar

    这份"JavaScript网页特效实例大全"集合了众多实用的JavaScript特效,旨在帮助开发者提升网站用户体验,创造丰富多彩的网页互动效果。 1. **基础概念** - JavaScript基础:理解变量、数据类型、控制流程(条件语句...

    JavaScript网页特效实例大全(经常用到的)

    本资源包“JavaScript网页特效实例大全”汇集了众多在实际网页开发中常用且实用的JavaScript特效,旨在帮助开发者提升网页的用户体验和视觉效果。 1. **动画效果** - `fadeIn/fadeOut`:实现元素的淡入淡出效果,...

Global site tag (gtag.js) - Google Analytics