jquery 插件（三）精选动画仿flash插件1

最新推荐文章于 2018-05-15 20:48:36 发布

brainwkernighan

最新推荐文章于 2018-05-15 20:48:36 发布

阅读量1.3k

点赞数

文章标签： jquery flash image animation function jquery插件

本文链接：https://blog.csdn.net/brainwkernighan/article/details/6570727

版权

本篇介绍多个jquery插件，有动画效果，或者仿flash效果

1）imageflow

效果：imageGallery:苹果的coverflow，图片的滑动，鼠标滚轮的滑动来显示图片

商用：否

网址：http://imageflow.finnrudolph.de/

优缺点：不需要额外的js语句，直接外部链接js和css即可出效果，缺点商用需要licence

<mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></mce:script>  <link rel="stylesheet" href="imageflow.packed.css" mce_href="imageflow.packed.css" type="text/css" /> <mce:script type="text/javascript" src="imageflow.packed.js" mce_src="imageflow.packed.js"></mce:script> </head> <body> <h1>ImageFlow</h1>  <div id="myImageFlow" class="imageflow"> <img src="img/img1.png" mce_src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 1" /> <img src="img/img2.png" mce_src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 2" /> <img src="img/img3.png" mce_src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 3" /> <img src="img/img1.png" mce_src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 4" /> <img src="img/img2.png" mce_src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 5" /> <img src="img/img1.png" mce_src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 6" /> <img src="img/img2.png" mce_src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 7" /> <img src="img/img3.png" mce_src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 8" /> <img src="img/img1.png" mce_src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 9" /> <img src="img/img1.png" mce_src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 10" /> <img src="img/img2.png" mce_src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 11" /> <img src="img/img3.png" mce_src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 12" /> <img src="img/img2.png" mce_src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 13" /> <img src="img/img3.png" mce_src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 14" /> <img src="img/img3.png" mce_src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 15" /> </div>

2） slidertip

效果：通过点击+号出现层，展示图文并茂的文字

网址：http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/

思想：运用jquery来修改div的一些css样式，从而达到我们所需要的目的

3）zoomer gallery 图片样式表

效果：点击图片动弹弹出大的图片，鼠标移动后消失

网址：

思想：首先利用div和css来实现图片的整个架构，然后对需要放大的图片运用jquery的zoomer方法

使用：$.fn.zoomer=function(b){var c = $.extend({ speedView:200, // speed of the main animation speedRemove:400, // speed remove animation altAnim:false, // whether we animate alt tags or not speedTitle:400, // title animation speed debug:false},b); // switch between debug mode var d = $.extend(c,b);

4)Bubble navigation

效果：使用bubble来导航

网址：http://gsgd.co.uk/sandbox/jquery/easing/

使用：

$(function(){ $("#nav >div").hover( function(){ var $this = $(this); $this.find('img').stop().animate({ 'width':'199px', 'height':'199px', 'top':'-25px', 'left':'-25px', 'opacity':'1.0' },500,'easeOutBack',function(){ $(this).parent().find('ul').fadeIn(700); }); $this.find('a:first,h2').addClass('active'); }, function(){ var $this = $(this); $this.find('ul').fadeOut(500); $this.find(;img').stop().animate({ 'width':'52px', 'height':'52px', 'top':'0px', 'left':'0px', 'opacity':'0.1' },500,'easeOutBack'); $this.find('a:first h2').removeClass('active'); }); });

brainwkernighan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 插件（三）精选动画仿flash插件1

本篇介绍多个jquery插件，有动画效果，或者仿flash效果1）imageflow效果：imageGallery:苹果的coverflow，图片的滑动，鼠标滚轮的滑动来显示图片商用：否网址：http://imageflow.finnrudolph.de/优缺点：不需要额外的js语句，直接外部链接js和css即可出效果，缺点商用需要licence
复制链接

扫一扫