直逼Flash的流畅感:jQuery 运动特效展示

Web前端24.2K阅读模式

围剿 Flash 的不仅有 HTML 5,还有 JavaScript,著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅,有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效,这些效果可以更有效地展示你的内容。

1. 流感导航菜单下面的导航菜单,当鼠标在上面移动的时候,会很流畅地垂下解释菜单,当你将鼠标在上面快速左右移动的时候,会怀疑这是 Flash。

 

2. 转花灯Roundabout 是一个 jQuery 插件,可以将一组 HTML 对象转换为旋转花灯的效果。

 

3. 拉洋片拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。

 

4. jQuery Quicksand 插件这个让人赞叹的插件,可以对一组 HTML 对象重新洗牌,效果非常出众。

 

5. 导航滑块这种风格的导航已经见于很多站点,鼠标在导航菜单上移动的时候,一个高亮指示条随着鼠标滑动,指示当前的导航位置。

 

6. 文字的移动纹理在文字上,显示移动的纹理,效果美轮美奂。原理是,做一个带透明文字的 PNG 图像放在一个容器里,容器的背景放一张图案,用 jQuery 移动容器的背景,很简单,不过,不支持 IE6,因为 IE6 不支持 PNG。

 

7. jDiv: jQuery 导航 Tab一个可以显示丰富内容的下拉导航菜单(演示要翻墙)。

 

8. 基于 CSS3 和 jQuery 的半透明导航系统鼠标在导航菜单上移动,显示半透明的指示图标。CSS3 做这个实在太容易了。

 

9. 云台式拉洋片常规的拉洋片效果要么左到右,要么右到左,或者垂直上下,这个 jQuery 效果可以象云台那样扫镜头。

 

10. SlideDeckSlideDeck 是一种新颖的内容展示方式,有点类似 Outlook 的手风琴菜单,但视觉效果和用户体验更好一些。

 

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
  • JQuery
  • Web前端
评论  2  访客  1  作者  1
    • 小龙
      小龙 4

      鸟哥首页的图片切换很不错,在你博客里找了很久,也没找到,相关文章,有时间的话可以介绍一下吗?

        • 知更鸟
          知更鸟

          @ 小龙 到WOPUS主题站,有几款主题有类似的动画,今天我发的就差不多,扒出来

      匿名

      发表评论

      匿名网友
      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

      拖动滑块以完成验证