jquery实现的淡入淡出效果实例

知更鸟
知更鸟
知更鸟
1518
文章
6914
评论
2011年3月14日21:57:08 6 6.8K

整理的一些jQuery的淡入淡出效果,这些jQuery插件将帮助您快速地将效果部署于您的网站或应用上。

1.Jquery 淡入淡出

代码地址:http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/

介绍:这里包括了文字、图片的淡入淡出效果,包括间个图片效果,多个图片效果。
演示:http://www.hv-designs.co.uk/tutorials/jquery/all.html
效果图:

2.jquery 幻灯效果
代码地址:http://jonraasch.com/blog/a-simple-jquery-slideshow
介绍:jquery实现的幻灯效果,说明很详细的,效果也不错,网站页面也很酷。
演示:http://jonraasch.com/blog/a-simple-jquery-slideshow
下载simple-jquery-slideshow
3.CrossSlide

代码地址:http://www.gruppo4.com/~tobia/cross-slide.shtml

介绍:corssslide是jquery的一个插件来强化js幻灯、图片切换等效果的,可以媲美于flash实现的图片变换效果。

演示:http://www.gruppo4.com/~tobia/cross-slide.shtml

下载jquery.cross-slide

4.Fade transition plugin for jQuery

代码地址:http://www.robpoyntz.com/blog/?p=223

说明:jquery的一个插件,实现了图片的幻灯切换,可以用做新闻头条。

演示地址:http://www.robpoyntz.com/blog/?p=223

下载fadeNavigation

5.Supervised

代码地址:http://www.buildinternet.com/project/supersized/

介绍:也是jquery的一个插件,可以实现多种效果,并且参数可以灵活地配置。

演示地址:

http://www.buildinternet.com/project/supersized/default.php

http://www.buildinternet.com/project/supersized/slideright.php

下载supersized.1.0

6.PictureSlides

代码地址:http://www.robertnyman.com/picture-slides/implementation.htm

介绍:可以用作图片集,点击图片进行切换,效果还是不错的。纯js实现的,没有任何flash代码,如果与php结合后,实现的效果将会很棒的。

演示地址:http://www.robertnyman.com/picture-slides/demo-packages/gallery/index.html

下载picture-slides-gallery-demo

7.jQuery Cycle Plugin

代码地址:http://malsup.com/jquery/cycle/

说明:集成了几种图片的效果,不错。

演示地址:http://malsup.com/jquery/cycle/

下载jquery.cycle

8.图片集插件

代码地址:http://spaceforaname.com/galleryview

说明:超级棒的图片集

演示:http://spaceforaname.com/gallery-customized.html

下载galleryview-2.0

9.PikaChoose

代码地址:http://pikachoose.com/

说明:多家公司在用这个效果。

演示:http://pikachoose.com/demo/

下载PikaChoose_3.0

10.s3Slider

代码地址:http://www.serie3.info/s3slider/index.php

说明:图片的文字注释效果不错。

演示地址:http://www.serie3.info/s3slider/demonstration.html

下载s3SliderFull

11.InnerFade with JQuery

代码地址:http://medienfreunde.com/lab/innerfade/

说明:很简单实用的效果,包括图片与文字。

演示:http://medienfreunde.com/lab/innerfade/

下载jquery.innerfade

继续阅读
weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

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

评论:6   其中:访客  4   博主  0   引用   2
    • wentian wentian 1

      这篇帖子得顶

      • zkblog zkblog 3

        辛苦了。不过好像里面有一个我打不开。都还不错。

        • 捷易通充值软件 捷易通充值软件 0

          学习了,楼主辛苦了

          捷易通充值软件

          • TeachCourse TeachCourse 3

            很漂亮的博客网站,每次看到都给自己一种新鲜感!!