超强1000个jquery极品插件(三)(图片文字展示类 )

From admin on 2010-09-07 00:50:17

(1)imgAreaSelect

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907005820t.jpg" border="0" alt="" />

imgAreaSelect
(2)Easy Slide

EasySlide 是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907005820S.jpg" border="0" alt="" width="400" height="326" />

Easy Slide
(3)Easy News

Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件，可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果，调整显示速度，可自行修改CSS改变您为喜欢的风格。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907005820T.jpg" border="0" alt="" />

Easy News

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907005820K.gif" border="0" alt="" /> Easy News Plus
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070100208.gif" border="0" alt="" />
Easy News Plus是基于Easy News开发，滚动式新闻或图文内容展示的jQuery插件，但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。

Easy News Plus
(4)jQZoom
基于jQuery开发的图片放大镜插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220G.jpg" border="0" alt="" />

jQZoom

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907005820K.gif" border="0" alt="" /> jQuery Plugin: Text Highlight
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070100208.gif" border="0" alt="" />
利用javascript对页面中的关键字进行着色的jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220g.jpg" border="0" alt="" />

jQuery Plugin: Text Highlight
(5)jCarousel Lite

这个jQuery插件能够帮助你以滚动（carousel）的方式来组织图片和其它内容。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102201.jpg" border="0" alt="" />

jCarousel Lite
(6)jCarousel

jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序，列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220B.jpg" border="0" alt="" />

jCarousel
(7)Spacegallery-Jquery

一个采用jQuery开发，类似于Flash效果的图库（image gallery）。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220f.jpg" border="0" alt="" />

Spacegallery-Jquery
(8)jQuery Slider Gallery

这是一个基于jQuery开发相册控件，类似于Apple网站上用于展示产品的效果。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102205.jpg" border="0" alt="" />

jQuery Slider Gallery
(9)jQuery Cycle Plugin

jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220r.jpg" border="0" alt="" />

jQuery Cycle Plugin
(10)Zoomimage

该jQuery插件能够让以当前流行的方式来展示图片。提供：预加载图片提示，对图片进行分组，自动调整图片显示比例，图片分组浏览控制。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220d.jpg" border="0" alt="" />

Zoomimage
(11)prettyPhoto

prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果，图库浏览等特性。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220n.jpg" border="0" alt="" />

prettyPhoto
(12)ThickBox

ThickBox是一个模式对话框UI控件。基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220f.jpg" border="0" alt="" />

ThickBox
(13)Galleria

Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220z.jpg" border="0" alt="" />

Galleria
(14)jQuery Flash Plugin

一个jQuery插件用于在页面中嵌入Flash影片。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102207.jpg" border="0" alt="" />

jQuery Flash Plugin
(15)jQuery.SerialScroll

jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件，支持水平／垂直方向滚动和混合滚动效果。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220X.jpg" border="0" alt="" />

jQuery.SerialScroll
(16)InnerFade

InnerFade这个jQuery插件能够让任意一组元素（img，div等）实现淡入淡出播放效果。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220K.jpg" border="0" alt="" />

InnerFade
(17)NyroModal

一个基于jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220m.jpg" border="0" alt="" />

NyroModal
(18)CrossSlide

CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入"滑出等。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220x.jpg" border="0" alt="" />

CrossSlide
(19)Magnify

Magnify是一个能够在图片上添加放大镜功能的jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220L.jpg" border="0" alt="" />

Magnify
(20)Img Notes

用于当鼠标移到图片是时，显示一个信息提示框。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220p.jpg" border="0" alt="" />

Img Notes
(21)FancyZoom

FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220c.jpg" border="0" alt="" />

FancyZoom
(22)Jcrop

Jcrop 是一个跨浏览器的jQuery图片剪切插件（jQuery image crop plugin）。支持对剪切框加CSS样式，当选取或拖动时添加回调事件（Callbacks），剪切时能够约束宽度与高度。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220x.jpg" border="0" alt="" />

Jcrop
(23)Galleriffic

Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102206.jpg" border="0" alt="" />

Galleriffic
(24)Image Upload and Auto Crop

采用PHP+jQuery开发的图片上传和剪切（Crop）工具。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102201.jpg" border="0" alt="" />

Image Upload and Auto Crop
(25)prettyGallery
prettyGallery是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220z.jpg" border="0" alt="" />

prettyGallery
(26)jQuery.popeye

jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220u.jpg" border="0" alt="" />

jQuery.popeye
(27)s3Slider

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

可以在图片上的任意位置，透明显示当前所放映图片的说明信息。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102201.jpg" border="0" alt="" />

s3Slider
(28)Pirobox

采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220Z.jpg" border="0" alt="" />

Pirobox
(29)Simple Controls Gallery

这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220R.jpg" border="0" alt="" />

Simple Controls Gallery
(30)Agile Carousel

Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示，添加文本水印等功能。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220J.jpg" border="0" alt="" />

Agile Carousel
(31)jQuery Plugin-Page Peel

这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220z.jpg" border="0" alt="" />

jQuery Plugin-Page Peel
(32)Easy Slider
一个jQuery插件，当点击导航按纽时可以水平或垂直播放图片或其它任何内容。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220E.jpg" border="0" alt="" />

Easy Slider
(33)imgPreview

图片预览jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220n.jpg" border="0" alt="" />

imgPreview
(34)Jquery Fade In.Fade Out

这是一个用于让图片产生淡入淡出效果的jQuery插件。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220q.jpg" border="0" alt="" />

Jquery Fade In.Fade Out
(35)Captify

这个jQuery插件能够在图片上显示标题信息，当鼠标放到图片上时滑动出现。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220d.jpg" border="0" alt="" />

Captify
(36)jParallax

这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与jParallax一样但采用Mootools框架开发。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220g.jpg" border="0" alt="" />
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220W.jpg" border="0" alt="" />

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

截图：
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220f.jpg" border="0" alt="" />

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010220U.jpg" border="0" alt="" />

一些演示

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购物网站产品展示.作者：cssrain@gmail.com(admin)

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010221t.jpg" border="0" alt="" />

程序介绍：
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

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010221g.png" alt="" />

Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。
(45)ZoomImage <img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010221S.png" alt="" />
zoomimage ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。
(46)EasySlider

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010221d.png" alt="" width="450" height="140" />

Easy Slider 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。(47)The Slider from Barack Obama’s website

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

CodaSlider，又一个不错的滑动控制效果。(49)jQuery Slider II

可以上、下、左、右四个方向滚动。可设置鼠标移上时停止滚动。

支持自定义的加速按钮。

介绍

演示

参数说明

教程

下载

兼容性

反馈

(60)商品放大镜效果
在一些大型的购物网站你经常可以看到这个效果，通过放大镜效果，可以把一个小的图片的某一部位放大到清晰可见。
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010222T.jpg" alt="" />
1.原理

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

所以最简洁的HTML代码结构如下：
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010223I.jpg" alt="" />
2.小图中的半透明层

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

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

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

此效果不仅是显示商品，地图鹰眼效果也可以使用.
<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010225B.jpg" alt="" />
下载：http://www.cssrain.cn/demo/fangdajing/fangdajing.rar

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

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

引用jquery库文件及pageslide插件文件

在页面中添加事件触发链接，链接地址是要打开页面的地址，如：

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

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

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

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

62.

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010228T.jpg" alt="Automatic Infinite Carousel" width="480" height="300" />
63.

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070102331.jpg" alt="Sliding Boxes and Captions with jQuery" width="480" height="278" />

64.不错的图片分类展示或者文字展示效果 <img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/201009070105330.png" alt="Final Product" />
（65）jQuery Infinite Carousel

<img src="http://www.sunhaibing.com/wp-content/uploads/pic2/2010/09/20100907010536o.jpg" alt="Automatic Infinite Carousel" width="441" height="182" />

查看完整版本：超强1000个jquery极品插件(三)(图片文字展示类 )

Tags: jquery

超级计算机囧囧囧's Archivers

超强1000个jquery极品插件(三)(图片文字展示类 )

查看完整版本： 超强1000个jquery极品插件(三)(图片文字展示类 )

查看完整版本：超强1000个jquery极品插件(三)(图片文字展示类 )