`
love~ruby+rails
  • 浏览: 849354 次
  • 性别: Icon_minigender_1
  • 来自: lanzhou
社区版块
存档分类
最新评论

超炫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

分享到:
评论

相关推荐

    超炫JQuery照片墙特效

    【超炫JQuery照片墙特效】是一种常见的网页交互设计,主要利用JQuery库来实现动态、引人入胜的图片展示效果。这种特效通常应用于个人作品集、摄影网站或者产品展示页面,为用户提供一个视觉上吸引人的浏览体验。在本...

    超炫的 JQuery 图片展示

    本教程将深入探讨如何利用JQuery实现超炫的图片展示效果。 首先,我们需要理解JQuery的核心概念。JQuery是由John Resig创建的一个轻量级、高性能的JavaScript库,它的目标是简化HTML文档遍历、事件处理、动画以及...

    超炫jQuery测试答题功能

    更详细"超炫jQuery测试答题功能”特效教程,http://www.sucaihuo.com/js/39.html。你也可以在素材火网页特效下载 http://www.sucaihuo.com/js,都是优质素材,最主要是既有教程,也有演示并且可下载哦,技术大咖也来...

    jquery若干特效(超炫)

    本文将深入探讨在提供的压缩包中包含的"jquery若干特效(超炫)",这些特效展示了jQuery在增强网页交互性和用户体验方面的卓越表现。 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件...

    超炫jquery图片展示例子

    在“超炫jquery图片展示例子”这个主题中,我们将深入探讨如何利用jQuery创建出吸引人的、动态的图片展示效果,包括翻转、立体以及太空等独特视觉体验。 首先,让我们来讨论“图片翻转”的实现。在网页设计中,图片...

    JQuery 特效

    **jQuery特效:深入理解与应用** jQuery库是JavaScript的一个强大扩展,它简化了HTML文档遍历、事件处理、动画和Ajax交互。在网页设计中,jQuery特效为网站增添互动性和吸引力,极大地提升了用户体验。以下我们将...

    返回顶部【超炫】jquery特效

    本教程将深入探讨如何使用jQuery创建一个“超炫”的返回顶部特效。 首先,我们需要在HTML文件中添加一个“返回顶部”的按钮。通常,这个按钮会隐藏在页面底部,当用户向下滚动时才会出现。例如: ```html 返回顶部...

    jquery超炫图片特效

    **jQuery超炫图片特效详解** 在网页设计中,图片特效能极大地提升用户体验,吸引用户的注意力。本教程将深入探讨如何利用jQuery实现一个旋转缩略图并伴随动画效果的图片展示功能。该特效允许用户通过点击缩略图查看...

    超炫游戏角色介绍jQuery幻灯片特效

    本项目“超炫游戏角色介绍jQuery幻灯片特效”利用jQuery和CSS3的强大功能,为游戏网站提供了一种吸引用户注意力的方式,有效地展示游戏角色的信息。 首先,jQuery库的核心特性在于它的选择器机制,它允许开发者用更...

    jQuery超炫平滑过渡垂直滚动视觉差特效

    jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。

    Jquery翻页 超炫 特效

    图片翻页特效通常涉及到多个图片的切换展示,这在jQuery中可以通过选择器、事件绑定和动画方法来实现。以下是一个简单的图片轮播实现步骤: 1. **选择器**:选择需要进行翻页的图片元素,例如,如果有多个`<img>`...

    jquery弹出层特效超炫

    《jQuery弹出层特效:打造超炫用户体验》 在网页设计和开发中,弹出层是一种常见的交互元素,用于展示信息、提示用户或进行交互操作。jQuery作为一个强大的JavaScript库,为实现这种效果提供了丰富的功能和便利。本...

    Jquery特效实例大全展示

    在《jQuery特效实例大全展示》中,"一款超炫的后台,Ext模拟Windows桌面"可能是其中的一个亮点。这个例子展示了如何使用jQuery和可能的ExtJS框架来创建一个类似Windows操作系统的桌面界面。这种特效通常包括可拖动的...

    jquery 超炫3D图片展示

    本文将深入探讨如何使用jQuery实现超炫3D图片展示,并结合描述中的“带小导航”、“带上下左右按钮”的特性,为您揭示其背后的实现原理和关键代码。 首先,我们需要理解3D效果的基本概念。在Web上,我们通常通过CSS...

    超炫jquery产品图片列表排序源码

    "超炫jquery产品图片列表排序源码"是一个典型的例子,它展示了如何利用jQuery实现产品图片列表的动态排序功能,提升用户体验。广州威特教育提供了这一源码,其网址为www.wtjy.com.cn,这可能是一个教育平台,教授...

    jQuery彩色心形冒泡动画特效.zip

    总的来说,"jQuery彩色心形冒泡动画特效"是一个结合了HTML、CSS和JavaScript技术的实例,展示了如何使用jQuery来实现动态、吸引人的网页元素。通过学习和理解这个特效的实现过程,开发者可以提升他们的前端技能,更...

    jQuery图片翻页超炫特效

    jQuery图片翻页超炫特效是一种常见的网页交互设计,它利用jQuery库的强大功能为用户提供引人入胜的视觉体验。在网页设计中,这种特效能够使图片展示更加生动有趣,增加用户的浏览兴趣。以下是对这个主题的详细解释:...

    使用JQuery实现Flash的超炫特效

    在本文中,我们将深入探讨如何使用JQuery来实现Flash的超炫特效,包括窗帘式、帷幕式和喷泉式特效。JQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得创建动态网页变得更加简单。...

    jquery超炫图片效果

    本项目“jquery超炫图片效果”利用jQuery的强大功能,为用户提供了一种创新且引人注目的图片展示体验。接下来,我们将深入探讨这个特效背后的关键技术和实现方法。 首先,该特效的核心是缩略图的旋转展示。在网页中...

    Jquery特效之超炫图片翻转

    本主题将深入探讨“Jquery特效之超炫图片翻转”这一技术,这是一种能够提升网站视觉吸引力的创新方法。 首先,我们要理解jQuery的核心特性:选择器、事件处理、DOM操作和动画效果。jQuery的选择器类似于CSS,可以...

Global site tag (gtag.js) - Google Analytics