Farbtastic

Farbtastic是一個(gè)color picker插件。它能夠在一個(gè)頁面中加入多個(gè)顏色選擇控件，然后每個(gè)控件關(guān)聯(lián)到頁面中的一個(gè)元素比如：文本輸入框。


Farbtastic
jQuery Color Picker 21世紀(jì)開運(yùn)網(wǎng)在線排盤星座就成功運(yùn)用這些技巧，www.21kaiyun.com

一個(gè)簡(jiǎn)單的顏色選擇控件。操作方式與Adobe Photoshop中顏色選擇操作置。




iColorPicker

iColorPicker是一個(gè)只有6KB大小的jQuery Color Picker。只要將輸入框的class屬性設(shè)置為“iColorPicker”就能變一個(gè)漂亮的顏色選擇器。


iColorPicker

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

ContextMenu

用于創(chuàng)建右鍵彈出菜單的jQuery插件。


ContextMenu

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

imgAreaSelect

imgAreaSelect這個(gè)jQuery插件能夠選取一張圖片中一個(gè)矩形區(qū)域。


imgAreaSelect

Easy Slide

EasySlide 是以jQuery為基礎(chǔ)開發(fā)的一個(gè)圖庫展示插件，EasySlide可以將任何一個(gè)網(wǎng)頁容器(Container)內(nèi)的圖形自動(dòng)將其排列展示，并加上鼠標(biāo)指向時(shí)的暫停效果(Pause)，可以當(dāng)作圖庫展示或是動(dòng)畫及廣告Banner使用。


Easy Slide


Easy News

Easy News是一個(gè)可以讓您輕松顯示網(wǎng)站新聞或圖文內(nèi)容展示的jQuery插件，可設(shè)定Fade In-Out ,Slide Up-Down, Left To Right 的效果，調(diào)整顯示速度，可自行修改CSS改變您為喜歡的風(fēng)格。


Easy News


Easy News Plus

Easy News Plus是基于Easy News開發(fā)，滾動(dòng)式新聞或圖文內(nèi)容展示的jQuery插件，但是與Easy News有完全不同的顯示方式(以左右滑動(dòng)為主要的顯示方法)。

Easy News Plus
jQZoom

基于jQuery開發(fā)的圖片放大鏡插件。


jQZoom

jQuery Plugin: Text Highlight

利用javascript對(duì)頁面中的關(guān)鍵字進(jìn)行著色的jQuery插件。



jCarousel Lite

這個(gè)jQuery插件能夠幫助你以滾動(dòng)（carousel）的方式來組織圖片和其它內(nèi)容。


jCarousel Lite


jCarousel

jCarousel是一個(gè)jQuery插件用于控制一個(gè)列表項(xiàng)目的水平或垂直順序，列表項(xiàng)目的內(nèi)容可以是靜態(tài)HTML內(nèi)容或通過AJAX加載的內(nèi)容。可以向前或向后滾動(dòng)。


jCarousel

Spacegallery-Jquery

一個(gè)采用jQuery開發(fā)，類似于Flash效果的圖庫（image gallery）。



jQuery Slider Gallery

這是一個(gè)基于jQuery開發(fā)相冊(cè)控件，類似于Apple網(wǎng)站上用于展示產(chǎn)品的效果。




jQuery Cycle Plugin

jQuery Cycle Plugin是一個(gè)slideshow插件。支持多種變換效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。




Zoomimage

該jQuery插件能夠讓以當(dāng)前流行的方式來展示圖片。提供：預(yù)加載圖片提示，對(duì)圖片進(jìn)行分組，自動(dòng)調(diào)整圖片顯示比例，圖片分組瀏覽控制。


Zoomimage


prettyPhoto

prettyPhoto是jQuery lightbox的一個(gè)“克隆”。并增加動(dòng)畫效果，圖庫瀏覽等特性。


prettyPhoto


ThickBox

ThickBox是一個(gè)模式對(duì)話框UI控件。基于jQuery開發(fā)，可以用來展示單張或多張圖片，內(nèi)嵌的內(nèi)容，iframed的內(nèi)容，或通過Ajax獲取的內(nèi)容。


ThickBox

Galleria

Galleria 是一個(gè)采用jQuery開發(fā)的圖片展示插件。它通過縮略圖導(dǎo)航一張一張的顯示大的圖片。支持通過CSS設(shè)置整個(gè)相冊(cè)的風(fēng)格。能夠按比例創(chuàng)建縮略圖并剪切成適合在縮略圖容器中顯示的小圖片。能夠觸一些事件，因此可以在圖片加載時(shí)執(zhí)行一些動(dòng)作。


Galleria

jQuery Flash Plugin

一個(gè)jQuery插件用于在頁面中嵌入Flash影片。




jQuery.SerialScroll

jQuery.SerialScroll是一個(gè)用于創(chuàng)建滾動(dòng)效果的jQuery插件，支持水平／垂直方向滾動(dòng)和混合滾動(dòng)效果。




InnerFade

InnerFade這個(gè)jQuery插件能夠讓任意一組元素（img，div等）實(shí)現(xiàn)淡入淡出播放效果。


InnerFade

NyroModal

一個(gè)基于jQuery開發(fā)，非常靈活和可定制外觀/動(dòng)畫效果的模式對(duì)話框。可通過Ajax調(diào)用目標(biāo)內(nèi)容，改變對(duì)話框大小等。


NyroModal

CrossSlide

CrossSlide這個(gè)jQuery插件實(shí)現(xiàn)了一些常用Javascript幻燈片放映動(dòng)畫效果如：動(dòng)態(tài)地移動(dòng)、縮放、漸變、滑入"滑出等。


CrossSlide

Magnify

Magnify是一個(gè)能夠在圖片上添加放大鏡功能的jQuery插件。


Magnify


Img Notes

用于當(dāng)鼠標(biāo)移到圖片是時(shí)，顯示一個(gè)信息提示框。


Img Notes
FancyZoom

FancyZoom采用縮放效果來展示圖片或任意HTML頁面，不需要另外開啟頁面來載入圖片，其效果在Apple Mac的官方網(wǎng)站中也有。


FancyZoom

Jcrop

Jcrop 是一個(gè)跨瀏覽器的jQuery圖片剪切插件（jQuery image crop plugin）。支持對(duì)剪切框加CSS樣式，當(dāng)選取或拖動(dòng)時(shí)添加回調(diào)事件（Callbacks），剪切時(shí)能夠約束寬度與高度。


Jcrop
Galleriffic

Galleriffic是一個(gè)用于創(chuàng)建快速展示相冊(cè)中照片的jQuery插件。圖片既可以以幻燈片的方式查看，也可以手動(dòng)點(diǎn)擊縮略圖查看。Galleriffic還支持分頁，從而使得它能夠展示更多的圖片。


Galleriffic
Image Upload and Auto Crop

采用PHP+jQuery開發(fā)的圖片上傳和剪切（Crop）工具。




prettyGallery

prettyGallery是一個(gè)圖庫導(dǎo)航控件Slider。基于jQuery開發(fā)，除了可以導(dǎo)航圖片之外，還支持其它任何內(nèi)容。可以配置導(dǎo)航滾動(dòng)速度和圖片標(biāo)題說明。


prettyGallery
jQuery.popeye

jQuery.popeye 這個(gè)插件能夠?qū)⒁唤M無序的圖片列表轉(zhuǎn)換成一個(gè)簡(jiǎn)單的相冊(cè)。當(dāng)點(diǎn)擊圖片時(shí)將以Lightbox風(fēng)格放大圖片。圖片展示框提供向前/向后控制并能夠?yàn)槊恳粡垐D 片添加備注說明信息。jQuery.popeye能夠根據(jù)圖片大小自動(dòng)調(diào)整展示框的高度和寬度。


jQuery.popeye
s3Slider

s3Slider 是一個(gè)jQuery slideshow插件，效果類似于smooth slideshow。

可以在圖片上的任意位置，透明顯示當(dāng)前所放映圖片的說明信息。


s3Slider

Pirobox

采用jQuery開發(fā)的Lightbox控件。能夠根據(jù)瀏覽器窗體大小自動(dòng)調(diào)整展示圖片大小。提供向前/向后控制鏈接。動(dòng)態(tài)加載圖片效果。易于定制。


Pirobox

Simple Controls Gallery

這是一個(gè)采用jQuery開發(fā)的圖片slideshow控件。提供一個(gè)暫停/播放/向前/向后展示的控制菜單。這個(gè)jQuery slideshow可以設(shè)置當(dāng)頁面打開時(shí)自動(dòng)播放圖片并能夠?qū)⒆罱榭吹膱D片存儲(chǔ)在cookie中。




Agile Carousel

Jquery Slideshow插件。易于定制圖片切換效果。提供開/關(guān)圖片標(biāo)題顯示，添加文本水印等功能。


Agile Carousel
jQuery Plugin-Page Peel

這是一個(gè)用于創(chuàng)建Page Peel(卷頁/頁面剝落)特效的jQuery插件。





Easy Slider

一個(gè)jQuery插件，當(dāng)點(diǎn)擊導(dǎo)航按紐時(shí)可以水平或垂直播放圖片或其它任何內(nèi)容。


Easy Slider
imgPreview

圖片預(yù)覽jQuery插件。當(dāng)鼠標(biāo)移到圖片鏈接上時(shí)，會(huì)在鏈接的旁邊出現(xiàn)一個(gè)類似于tooltip效果的圖片展示框。


imgPreview
Jquery Fade In.Fade Out

這是一個(gè)用于讓圖片產(chǎn)生淡入淡出效果的jQuery插件。





Captify

這個(gè)jQuery插件能夠在圖片上顯示標(biāo)題信息，當(dāng)鼠標(biāo)放到圖片上時(shí)滑動(dòng)出現(xiàn)。


Captify
jParallax

這是一個(gè)用于生成視差現(xiàn)象的jQuery插件。mParallax能夠產(chǎn)生的效果與jParallax一樣但采用Mootools框架開發(fā)。



jParallax

jQuery---運(yùn)用圖片預(yù)加載技術(shù)打造幻燈片

截圖：





一些演示：

http://www.21kakiyun.com
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 (以前做的，非預(yù)加載)

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

jQuery pageSlide 是一個(gè)jQuery插件，它可以控制一個(gè)隱藏頁面的顯示和關(guān)閉。具體來說，就是當(dāng)前頁占一個(gè)完整頁面，隱藏頁是看不到的，你設(shè)置一個(gè)控制的地方，點(diǎn)擊該控制時(shí)觸發(fā)事件，隱藏的頁面就彈出來。再次點(diǎn)擊隱藏頁面以外的空間，它就又關(guān)閉。

這適合在有限的空間里，在主頁里放重要內(nèi)容，而隱藏頁放一些并不一定要顯示，而是有需要的用戶才去展開顯示的內(nèi)容。

Creating a Slick Auto-Playing Featured Content Slider

Niall Doherty的 Coda Slider 為許許多多的設(shè)計(jì)師帶來了靈感. Chris Coyier 創(chuàng)建的這個(gè)Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ，實(shí)現(xiàn)我們常說的”圖片焦點(diǎn)特效”。多用于門戶站。

非常漂亮的一個(gè)特效布局。由 Benjamin Sterling 創(chuàng)建的這個(gè) portfolio layout 使用了jQuery的 easing plugin. 適合那些想用來展示個(gè)人作品集的用戶。

它在頁面兩邊顯示帶縮略的作品列表，當(dāng)你點(diǎn)擊每個(gè)條目時(shí)，會(huì)在中間部分以退場(chǎng)然后進(jìn)場(chǎng)的特效呈現(xiàn)出該作品的全部?jī)?nèi)容。

jQuery---圖片先模糊后清楚
http://www.hotbook.cn/

很多圖片網(wǎng)站用了這種技術(shù)，Google圖片中心也不例外。
這種技術(shù)的圖片是先顯示模糊的，然后再顯示清楚的。

這個(gè)模糊的原理就是 一張小圖片，然后把尺寸放大，大小等于大圖片的寬度和高度。
小圖片被拉大了，理所當(dāng)然就模糊了。

試想：小圖片的尺寸是10kb,大圖片的大小是500kb，那么加載小圖片的速度就是大圖片的50倍。
當(dāng)然你會(huì)說，如果直接顯示大圖片是什么情況呢？答案是：一片空白等著你。

?使用jQuery實(shí)現(xiàn)網(wǎng)頁報(bào)紙

原理：使用報(bào)紙內(nèi)容作為 背景圖，相對(duì)定位。
然后里面的div設(shè)置為絕對(duì)定位，大小，left和top都要跟背景圖匹配。
所以這個(gè)有一定的規(guī)律。

引申：
當(dāng)后臺(tái)人員問，每次要傳坐標(biāo)，寬度和高度不麻煩么？用戶知道使用么？
教用戶使用photoshop？。。。！！！
解決方案：
使用圖片截圖的插件即可，一般的截圖插件都能獲取4個(gè)坐標(biāo)，寬度和高度，
當(dāng)然我們只需要這些，并不需要把圖片真正截取下來。

jQuery購物網(wǎng)站產(chǎn)品展示.

程序介紹：
1，點(diǎn)擊大圖可以彈出遮罩效果.
2，下方小圖可以左右滾動(dòng).
3，點(diǎn)擊新窗口打開，可以打開當(dāng)前的大圖片.
4，遮罩層中小圖也可以左右滾動(dòng)，也可以打開大圖片.

在 IE6,IE7,Firefox3 & google 瀏覽器下測(cè)試通過.


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

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

Galleriffic 是使用 Mike Alsup 的 創(chuàng)建的圖片展示效果，包括縮略圖、圖片標(biāo)題和描述等詳細(xì)功能，是一個(gè)非常不錯(cuò)的高質(zhì)量畫廊相冊(cè)展示工具。

2，ZoomImage

zoomimage ，以一種獨(dú)具魅力的方式展示圖片效果。縮略圖鏈接在本頁彈出大圖，并且可以可以隨意拖拽該懸浮圖片。

3，EasySlider

Easy Slider 可以實(shí)現(xiàn)圖片或其他任意內(nèi)容，在水平或垂直方向上的滑動(dòng)效果，你還可以通過 CSS 自定義設(shè)置樣式。

4，The Slider from Barack Obama’s website

一個(gè)源自美國(guó)總統(tǒng) Barack Obama 網(wǎng)站的垂下滑動(dòng)菜單控制的圖片幻燈效果。

5，CodaSlider

CodaSlider，又一個(gè)不錯(cuò)的滑動(dòng)控制效果。

6，jQuery Slider II

jQuery Slider II 的布局非常符合操作習(xí)慣，在底部列出帶滾動(dòng)條的縮略圖控制列表，然后在上面顯示對(duì)應(yīng)圖片的大圖瀏覽，非常適合做高級(jí)相冊(cè)。

Beautiful Slider， 光看這個(gè)效果圖你就知道這個(gè)插件有多棒了吧，是的，這個(gè)插件實(shí)現(xiàn)的效果已經(jīng)不遜色于Flash完成的效果，整體表現(xiàn)流暢，文字顯示效果更是創(chuàng)意獨(dú)特。

８，LoopedSlider

loopedSlider是又一個(gè)任意內(nèi)容滾動(dòng)切換的幻燈片插件，使用操作簡(jiǎn)單。

9，SpaceGallery

SpaceGallery是一個(gè)全新的jQuery插件，點(diǎn)擊當(dāng)前圖片，會(huì)自動(dòng)放大消失，同時(shí)后面的圖片向前展示，有一種時(shí)光機(jī)器的感覺。

10，jQuery Popeye

SmoothGallery是一個(gè)最好的 Javascript 幻燈片效果之一，可以實(shí)現(xiàn)各種不同的幻燈片轉(zhuǎn)換效果。

14，jQuery Multimedia Portfolio

是一個(gè)基于jQuery 的滑動(dòng)效果插件,除了可以展示圖片之外，還可以加入各種不同類型的多媒體文件。

s3Slider是一個(gè)非常簡(jiǎn)單實(shí)用的流暢幻燈片效果，這個(gè)插件被應(yīng)用在無數(shù)的WordPress專業(yè)主題模板中。

?

總結(jié)

以上是生活随笔為你收集整理的超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。