阅读更多

12顶
1踩

Web前端

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

1. 流感导航菜单

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

Fluid  Navigation – How to create an informative menu-bar with jQuery &  CSS

2. 转花灯

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

Move  Elements with Style

3. 拉洋片

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

Automatic Image Slider w/ CSS & jQuery

4. jQuery Quicksand 插件

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

    jQuery  Quicksand Plugin

    5. 导航滑块

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

    jQuery  Magic Line Sliding Style Navigation

    6. 文字的移动纹理

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

    Text  with Moving Backgrounds

    7. jDiv: jQuery 导航 Tab

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

    jDiv: A  jQuery navigation menu alternative

    8. 基于 CSS3 和 jQuery 的半透明导航系统

    鼠标在导航菜单上移动,显示半透明的指示图标。CSS3 做这个实在太容易了。

    Halftone Navigation Menu With jQuery & CSS3

    9. 云台式拉洋片

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

    Animate Panning Slideshow with jQuery

    10. SlideDeck

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

    SlideDeck

    本文来源:http://devsnippets.com/article/10-jquery-transition-effects.html

     

    中文编译来源:锐商企业CMS 网站内容管理系统 官方网站

    来自: comsharp
    12
    1
    评论 共 6 条 请登录后发表评论
    6 楼 wiwiluo 2010-03-04 11:10
    看了最后一个,不支持IE7
    5 楼 Jekey 2010-03-03 11:03
    嗯,的确够强大
    4 楼 conanca 2010-03-03 09:56
    FLASH四面楚歌了..
    3 楼 xiaoyu001 2010-03-03 09:52
    为啥在很多网站都几乎同一时期看到 这篇文章?
    而且很多文章都出现过这个情况。。。

    转载的太猛了。
    2 楼 sunsmooth 2010-03-02 19:28
    太强大了,特别是重新洗牌的那个jQuery Quicksand 插件。
    1 楼 wjing63 2010-03-02 17:01
    我喜欢这些效果

    发表评论

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

    相关推荐

    • java实现图片无损任意角度旋转

      主要为大家详细介绍了java实现图片无损任意角度旋转,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    • Java实现图片无损任意角度旋转

      在做项目的时候遇到一个业务需要对图片进行旋转,于是找到一个工具类,亲测有效;在此与大家共享,需要用时可以直接用哈! 【实战】 一、旋转工具类代码: package zh.test.utils; import java.awt.*; im.....

    • java 图片 无损旋转_Java实现图片内容无损任意角度旋转

      主要问题是如何在图片做旋转后计算出新图片的长宽。在java 2d和基本math库的帮助下,其实利用简单的计算就可以知道。以下算法只是计算出旋转小于90度时的公式。当旋转大于90时,可以先把问题域换算到锐角的情况,再...

    • java如何利用rotate旋转图片_java实现图片任意角度旋转

      本文实例为大家分享了Java实现图片旋转,供大家参考,具体内容如下方法一:普通方法实现图片旋转/*** 图像旋转* @param src* @param angel* @return*/public static BufferedImage Rotate(Image src, double angel) ...

    • opencv无损旋转图片

      #旋转不改变图片原大小(周围补充黑色) def rotate_bound(image, angle): # grab the dimensions of the image and then determine the # center 获取图像的尺寸,然后确定中心 (h, w) = image.shape[:2] (cX, ...

    • Java旋转图片工具类

      本文提供可以任意角度(最小精度1度),旋转图片的Java工具类,旋转后的图片不会失真或丢失边角,根据角度参数,重新绘制图片,达到无损旋转的目的。 一.图片工具类 import java.awt.Dimension; import java....

    • java 实现图片顺时针逆时针旋转90度的入门方法

      新建一个图片,与原图高度和宽度互换,两重循环,构建映射关系。 代码如下: 其中顺时针和逆时针两个部分得分开运行。

    • java实现高清不失真图片压缩

      在这个示例中,来自 Origal.jpg 的图像被调整大小,然后保存到 thumbnail.jpg。另外,Thumbnailator 将接受文件名作为字符串。2.创建一个带旋转和水印的缩略图...java实现高清不失真图片压缩。1.从图像文件创建缩略图。

    • java 调整图片角度_Java实现图片按照指定角度翻转

      private BufferedImage rotateImage(BufferedImage img) throws IOException {int width = img.getWidth();int height = img.getHeight();BufferedImage newImage;double[][] newPositions = new double[4][];...

    • ta-lib-0.5.1-cp312-cp312-win32.whl

      ta_lib-0.5.1-cp312-cp312-win32.whl

    • 在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计

      课程设计 在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip课程设计

    • ta-lib-0.5.1-cp310-cp310-win-amd64.whl

      ta_lib-0.5.1-cp310-cp310-win_amd64.whl

    • 基于springboot+vue物流系统源码数据库文档.zip

      基于springboot+vue物流系统源码数据库文档.zip

    • ERA5_Climate_Moisture_Index.txt

      GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载

    • 自然语言处理.txtdsdfhgxnc

      知识图谱

    • 333498005787635解决keil下载失败的文件.zip

      333498005787635解决keil下载失败的文件.zip

    • python实现的微信机器人:过模拟微信客户端的行为,自动处理消息、发送消息的程序

      【微信机器人原理与实现】 微信机器人是通过模拟微信客户端的行为,自动处理消息、发送消息的程序。在Python中实现微信机器人的主要库是WeChatBot,它提供了丰富的接口,允许开发者方便地进行微信消息的接收与发送。这个项目标题中的"基于python实现的微信机器人源码"指的是使用Python编程语言编写的微信机器人程序。 1. **Python基础**:Python是一种高级编程语言,以其简洁的语法和强大的功能深受开发者喜爱。在实现微信机器人时,你需要熟悉Python的基本语法、数据类型、函数、类以及异常处理等概念。 2. **微信API与WeChatBot库**:微信为开发者提供了微信公共平台和微信开放平台,可以获取到必要的API来实现机器人功能。WeChatBot库是Python中一个用于微信开发的第三方库,它封装了微信的API,简化了消息处理的流程。使用WeChatBot,开发者可以快速搭建起一个微信机器人。 3. **微信OAuth2.0授权**:为了能够接入微信,首先需要通过OAuth2.0协议获取用户的授权。用户授权后,机器人可以获取到微信用户的身份信息,从而进行

    • 基于springboot实验室研究生信息管理系统源码数据库文档.zip

      基于springboot实验室研究生信息管理系统源码数据库文档.zip

    • 汇川技术-包装行业工艺手册

      张力控制,色标跟踪,多轴同步,电子凸轮,横切等工艺控制案例。

    • python批量处理Word文件完整源码分享给需要的同学

      在Python编程环境中,处理Microsoft Word文档是一项常见的任务。Python提供了几个库来实现这一目标,如`python-docx`,它可以让我们创建、修改和操作.docx文件。本教程将重点介绍如何利用Python进行Word文档的合并、格式转换以及转换为PDF。 1. **合并Word文档(merge4docx)** 合并多个Word文档是一项实用的功能,特别是在处理大量报告或文档集合时。在Python中,可以使用`python-docx`库实现。我们需要导入`docx`模块,然后读取每个文档并将其内容插入到主文档中。以下是一个基本示例: ```python from docx import Document def merge4docx(file_list, output_file): main_doc = Document() for file in file_list: doc = Document(file) for paragraph in doc.paragraphs: main_doc.add_paragraph(paragraph.text) m

    Global site tag (gtag.js) - Google Analytics