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

知更鸟
知更鸟
站长
2334
文章
0
粉丝
Web前端66,843阅读模式

整理的一些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
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  6  访客  4
    • wentian
      wentian 1

      这篇帖子得顶

      • zkblog
        zkblog 3

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

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

          学习了,楼主辛苦了

          捷易通充值软件

          • TeachCourse
            TeachCourse 3

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

          匿名

          发表评论

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

          拖动滑块以完成验证