jquery插件整理篇（三）图片展示插件

(1)imgAreaSelect

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。


imgAreaSelect
 

 (2)Easy Slide

EasySlide 是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。


Easy Slide

  热点图书：www.hotbook.cn

(3)Easy News

Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件，可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果，调整显示速度，可自行修改CSS改变您为喜欢的风格。


Easy News


 Easy News Plus 

Easy News Plus是基于Easy News开发，滚动式新闻或图文内容展示的jQuery插件，但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。

Easy News Plus

(4)jQZoom 

基于jQuery开发的图片放大镜插件。


jQZoom

 jQuery Plugin: Text Highlight 

利用javascript对页面中的关键字进行着色的jQuery插件。


jQuery Plugin: Text Highlight

(5)jCarousel Lite

这个jQuery插件能够帮助你以滚动（carousel）的方式来组织图片和其它内容。


jCarousel Lite

  热点图书：www.hotbook.cn

(6)jCarousel

jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序，列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。


jCarousel
 

(7)Spacegallery-Jquery

一个采用jQuery开发，类似于Flash效果的图库（image gallery）。


Spacegallery-Jquery

(8)jQuery Slider Gallery

这是一个基于jQuery开发相册控件，类似于Apple网站上用于展示产品的效果。


jQuery Slider Gallery
 

(9)jQuery Cycle Plugin

jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。


jQuery Cycle Plugin
  热点图书：www.hotbook.cn

(10)Zoomimage

该jQuery插件能够让以当前流行的方式来展示图片。提供：预加载图片提示，对图片进行分组，自动调整图片显示比例，图片分组浏览控制。


Zoomimage

  热点图书：www.hotbook.cn

(11)prettyPhoto

prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果，图库浏览等特性。


prettyPhoto

  热点图书：www.hotbook.cn

(12)ThickBox

ThickBox是一个模式对话框UI控件。基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。


ThickBox
  热点图书：www.hotbook.cn

(13)Galleria

Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。


Galleria
  热点图书：www.hotbook.cn

(14)jQuery Flash Plugin

一个jQuery插件用于在页面中嵌入Flash影片。


jQuery Flash Plugin
  热点图书：www.hotbook.cn

 (15)jQuery.SerialScroll

jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件，支持水平／垂直方向滚动和混合滚动效果。


jQuery.SerialScroll
  热点图书：www.hotbook.cn

 (16)InnerFade

InnerFade这个jQuery插件能够让任意一组元素（img，div等）实现淡入淡出播放效果。


InnerFade
 

(17)NyroModal

一个基于jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。


NyroModal
  热点图书：www.hotbook.cn

(18)CrossSlide

CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入"滑出等。


CrossSlide
  热点图书：www.hotbook.cn

(19)Magnify

Magnify是一个能够在图片上添加放大镜功能的jQuery插件。


Magnify

  热点图书：www.hotbook.cn

(20)Img Notes

用于当鼠标移到图片是时，显示一个信息提示框。


Img Notes

(21)FancyZoom

FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。


FancyZoom   热点图书：www.hotbook.cn
 

(22)Jcrop

Jcrop 是一个跨浏览器的jQuery图片剪切插件（jQuery image crop plugin）。支持对剪切框加CSS样式，当选取或拖动时添加回调事件（Callbacks），剪切时能够约束宽度与高度。


Jcrop

(23)Galleriffic

Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。


Galleriffic  热点图书：www.hotbook.cn

(24)Image Upload and Auto Crop

采用PHP+jQuery开发的图片上传和剪切（Crop）工具。


Image Upload and Auto Crop   热点图书：www.hotbook.cn
 

(25)prettyGallery 

prettyGallery是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。


prettyGallery

(26)jQuery.popeye

jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。


jQuery.popeye  热点图书：www.hotbook.cn

(27)s3Slider

s3Slider 是一个jQuery slideshow插件，效果类似于smooth slideshow。

可以在图片上的任意位置，透明显示当前所放映图片的说明信息。


s3Slider
 

(28)Pirobox

采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。


Pirobox
 

 (29)Simple Controls Gallery

这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。


Simple Controls Gallery
 

 (30)Agile Carousel

Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示，添加文本水印等功能。


Agile Carousel

 (31)jQuery Plugin-Page Peel

这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。


jQuery Plugin-Page Peel

 

 (32)Easy Slider 热点图书：www.hotbook.cn

一个jQuery插件，当点击导航按纽时可以水平或垂直播放图片或其它任何内容。


Easy Slider

 (33)imgPreview

图片预览jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。


imgPreview

 (34)Jquery Fade In.Fade Out

这是一个用于让图片产生淡入淡出效果的jQuery插件。


Jquery Fade In.Fade Out

 

 (35)Captify 热点图书：www.hotbook.cn

这个jQuery插件能够在图片上显示标题信息，当鼠标放到图片上时滑动出现。


Captify

 (36)jParallax 热点图书：www.hotbook.cn

这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与jParallax一样但采用Mootools框架开发。



jParallax
 

(37)jQuery---运用图片预加载技术打造幻灯片

截图：





一些演示：热点图书：www.hotbook.cn
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html

http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html

http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html (以前做的，非预加载)

下载：
http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar

(38)jQuery pageSlide

jQuery pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就弹出来。再次点击隐藏页面以外的空间，它就又关闭。

这适合在有限的空间里，在主页里放重要内容，而隐藏页放一些并不一定要显示，而是有需要的用户才去展开显示的内容。

(39)Creating a Slick Auto-Playing Featured Content Slider

Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ，实现我们常说的”图片焦点特效”。多用于门户站。

(40)Portfolio Layout Idea Using jQuery

非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。

它在页面两边显示带缩略的作品列表，当你点击每个条目时，会在中间部分以退场然后进场的特效呈现出该作品的全部内容。

(41)jQuery---图片先模糊后清楚

http://www.hotbook.cn/

 

很多图片网站用了这种技术，Google图片中心也不例外。
这种技术的图片是先显示模糊的，然后再显示清楚的。

这个模糊的原理就是 一张小图片，然后把尺寸放大，大小等于大图片的宽度和高度。
小图片被拉大了，理所当然就模糊了。

试想：小图片的尺寸是10kb,大图片的大小是500kb，那么加载小图片的速度就是大图片的50倍。
当然你会说，如果直接显示大图片是什么情况呢？答案是：一片空白等着你。

演示：
http://www.cssrain.cn/demo/loadImages/loadimages.html
 

(42)使用jQuery实现网页报纸

演示：
http://www.cssrain.cn/demo/jquerynewspager/demo.html

原理：使用报纸内容作为 背景图，相对定位。
然后里面的div设置为绝对定位，大小，left和top都要跟背景图匹配。
所以这个有一定的规律。

下载：
http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar

引申：
当后台人员问，每次要传坐标，宽度和高度不麻烦么？用户知道使用么？
教用户使用photoshop？。。。！！！
解决方案：
使用图片截图的插件即可，一般的截图插件都能获取4个坐标，宽度和高度，
当然我们只需要这些，并不需要把图片真正截取下来。

 

(43)jQuery购物网站产品展示. 热点图书：www.hotbook.cn

作者： [email protected](admin )

 

程序介绍：
1，点击大图可以弹出遮罩效果.
2，下方小图可以左右滚动.
3，点击新窗口打开，可以打开当前的大图片.
4，遮罩层中小图也可以左右滚动，也可以打开大图片.

在 IE6,IE7,Firefox3 & google 浏览器下测试通过.


演示：
http://www.cssrain.cn/demo/jqueryProduct/demos.html

下载：
http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar

 

(44)Gallerific

Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。

(45)ZoomImage 热点图书：www.hotbook.cn

zoomimage ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。

(46)EasySlider

Easy Slider 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。热点图书：www.hotbook.cn

(47)The Slider from Barack Obama’s website

一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。

(48)CodaSlider

CodaSlider，又一个不错的滑动控制效果。热点图书：www.hotbook.cn

(49)jQuery Slider II

jQuery Slider II 的布局非常符合操作习惯，在底部列出带滚动条的缩略图控制列表，然后在上面显示对应图片的大图浏览，非常适合做高级相册。

(50)Beautiful Slider 热点图书：www.hotbook.cn

Beautiful Slider， 光看这个效果图你就知道这个插件有多棒了吧，是的，这个插件实现的效果已经不逊色于Flash完成的效果，整体表现流畅，文字显示效果更是创意独特。

(51)LoopedSlider 热点图书：www.hotbook.cn

loopedSlider是又一个任意内容滚动切换的幻灯片插件，使用操作简单。

(52)SpaceGallery

SpaceGallery是一个全新的jQuery插件，点击当前图片，会自动放大消失，同时后面的图片向前展示，有一种时光机器的感觉。

(53)jQuery Popeye 热点图书：www.hotbook.cn

(54)Noobslide 热点图书：www.hotbook.cn

(55)Accessible News Slider 热点图书：www.hotbook.cn

(56)SmoothGallery 热点图书：www.hotbook.cn

SmoothGallery是一个最好的 Javascript 幻灯片效果之一，可以实现各种不同的幻灯片转换效果。

(57)jQuery Multimedia Portfolio

jQuery Multimedia Portfolio是一个基于jQuery 的滑动效果插件,除了可以展示图片之外，还可以加入各种不同类型的多媒体文件。

(58)s3Slider

s3Slider是一个非常简单实用的流畅幻灯片效果，这个插件被应用在无数的WordPress专业主题模板中。

via: 15 jQuery image carousels for slideshows and galleries

  热点图书：www.hotbook.cn

 (59)fxMarquee

fxMarquee 是一个jQuery内容滚动插件。它可以让一组内容定向滚动，并可以设置滚动速度。本插件具有以下特点：

• 可以上、下、左、右四个方向滚动。可设置鼠标移上时停止滚动。
• 支持自定义的加速按钮。

1. 介绍
2. 演示
3. 参数说明
4. 教程
5. 下载
6. 兼容性
7. 反馈  

(60)商品放大镜效果 热点图书：www.hotbook.cn

在一些大型的购物网站 你经常可以看到这个效果，通过放大镜效果，可以把一个小的图片的某一部位放大到清晰可见。 

 

1.原理

首先你必须要有2张图片，一张缩略图和一张高清晰的图片。
然后当鼠标在缩略图里移动时，通过计算鼠标在缩略图里的位置和比例。
最后通过比例就可以得出大图要显示的部分。

所以最简洁的HTML代码结构如下：

2.小图中的半透明层热点图书：www.hotbook.cn

当鼠标滑入小图片时，我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态：
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时，我们需要给半透明层定位，并马上显示出层。通过给元素绑定mousemove事件。
滑动时，需要给透明层实时定位，在计算定位时，要注意半透明层不超出图片边界。
同时在mousemove时，添加了一个setTimeout，减少资源占用。
滑出后，隐藏半透明层，并把mousemove解除绑定，减少资源占用.

这一步最关键的就是，滑动时中心点和坐标的计算。
演示：http://www.cssrain.cn/demo/fangdajing/demo_01.html

3.显示放大的图热点图书：www.hotbook.cn

第2步完成后，第3步就相对简单了。
在刚才3种状态上，在添加点内容。
鼠标滑入时，需要添加大图的显示。
鼠标滑动时，需要根据鼠标当前的位置在小图中的比例，然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后，需要隐藏大图。
这一步最关键的就是，滑动时比例的计算。
演示：http://www.cssrain.cn/demo/fangdajing/demo_02.html

4.发散思维热点图书：www.hotbook.cn

此效果不仅是显示商品，地图鹰眼效果也可以使用.

下载：http://www.cssrain.cn/demo/fangdajing/fangdajing.rar

  (61)PageSlide
使用时，在当前页面中设定一个链接，该链接的href属性指向另一个页面A，并为该链接绑定pageSlide事件。点击链接时，触发PageSlide 事件，在页面中创建一个新的区域（左侧或右侧，依据传入参数而定），然后通过jQuery ajax将页面A中内容读取到该区域中。

PageSlide用法很简单，简单说一下：

1. 引用jquery库文件及pageslide插件文件
2. 在页面中添加事件触发链接，链接地址是要打开页面的地址，如：

   <a href="_left.html" id="slide-left">从右边打开隐藏空间</a>

3. 为链接绑定pageSlide事件，并传入设定参数：

   //第一个参数是页面新区域的宽度
       //第二个参数是当前页面移动方向，方向为left，也就是从右侧出现新区域
       $("#slide-left").pageSlide({ width: "350px", direction: "left" });

下载PageSlide插件: 点击下载
本地下载：pagelider.rar (3.68 kb)

62.

63.

64.不错的图片分类展示或者文字展示效果 热点图书：www.hotbook.cn

（65） jQuery Infinite Carousel

66.T血展示效果

How to Make a Threadless Style T-Shirt Gallery
 

67.利用z-index做的图片展示效果
Create a gallery by using z-index and jQuery
 

 68.Page Peel Effect(卷页效果)jQuery 和 CSS
 

Soh Tanaka 在他网上发布了一个 “简单的卷页效果（Simple Page Peel Effect with jQuery & CSS.）” ，像这样的卷页效果或翻页效果，在一些门户网站或者是个人博客上经常能看得到
它实现的思路是有一个 “peel” 图片放在元素的右上方 ,当你徘徊在“Peel”时, “peels ”就会打开 和 “peels” 就会关闭，卷页里可以放置广告或者是订阅信息。这个很炫的效果看起来要通过flash来实现，不过，使用jQuery 或 MooTools 技术就可以轻松实现。

View Demo

69。Page Peel 热点图书：www.hotbook.cn
可以设置广告的高度、宽度、背景图和定位坐标等。和Pageear一样，使用Flash来显示果皮剥开的特效。
70.Create a 3D Tag Cloud in jQuery (演示地址)

一个用于创建会滚动的3D标签云jQuery插件。
71.Sliding Login Panel with jQuery

别的不说，先看效果图吧

这是展开以后的效果图

这是收缩以后的效果图

 

用jQuery实现这个功能也就几个函数就搞定了，来看看关键的代码吧。

1<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
2<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
3<script type="text/javascript" src="js/slide.js"></script>
首先要导入3个js文件，其中js/jquery-1.3.2.min.js是压缩以后的jQuery类库；
js/pngfix/supersleight-min.js是支持IE6的一个类库，是对图片进行处理的，它能消除那两个按钮图片的四周
（图片本来是长方形的，这里你看到的是圆角图片）。

然后就是下面的两个链接按钮了<a id="open">Log Id | Register</a>
                                    和<a id="close">Close Panel</a>

 1<div class="tab">
 2        <ul class="login">
 3            <li class="left">&nbsp;</li>
 4            <li>Hello Guest!</li>
 5            <li class="sep">|</li>
 6            <li id="toggle">
 7                <a id="open" class="open" href="#">Log In | Register</a>
 8                <a id="close" class="close" href="#">Close Panel</a>
 9            </li>
10            <li class="right">&nbsp;</li>
11        </ul>
12    </div>
第三个js文件里面写的就是jQuery的函数，代码很简单：

 1$(document).ready(function() {
 2    // Expand Panel
 3    $("#open").click(function(){
 4        $("div#panel").slideDown("slow");//点击id为open的链接展开面板    
 5    });    
 6    
 7    // Collapse Panel
 8    $("#close").click(function(){
 9        $("div#panel").slideUp("slow");    //点击id为的close链接隐藏面板
10    });        
11    
12    // Switch buttons from "Log In | Register" to "Close Panel" on click
13    $("#toggle a").click(function () {
14        $("#toggle a").toggle();//这个就是具有slideUp()和slideDown()双重效果
15    });    
16        
17});

下载：

jquerylogin.rar (58.83 kb)

72.jquery隐藏登录效果

当你不需要把登陆框直接显示在首页又必须要有这个玩意儿的时候,一个漂亮的下拉动画登陆框能够帮你达到你想要的效果.

当你的用户想要登陆的时候,点击按钮,弹出填写账户密码,不需要时则隐藏,多么好的用户体验..

[预览效果] [下载源码] [制作过程]

73.inFrame: Keep Demos Inside the Page with jQuery

 

利用jQuery在同一个页面中演示多个Demo，实现不需要离开当前页面就能查看单独的Demo链接，不需要在head标签中添加Demo所需要的CSS文件，也不用担心javascript会与其它javascript相冲突。简单易用，只要指定每一个Demo链接的Class为inframe就可以。 
 
(74)jQuery Superbox!

jQuery Superbox!是一个jQuery插件用于创建可定制的模式对话框（效果与lightbox相似）。它可以展示任意类型的内容包括iframes，默认为图片类型（支持单张或多张模式）。模式对话框的尺寸可以根据展示的内容自动调整，也可以定义一个标准展示尺寸。

(75)NyroModal

热点图书：www.hotbook.cn

一个基于jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。


转花灯

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

75. 拉洋片

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

76. jQuery Quicksand 插件

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

 

77.文字的移动纹理

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

77云台式拉洋片

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

10. SlideDeck

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