jquery超強插件-顏色獲取,右鍵菜單,圖片展示

Farbtastic是一個color picker插件。它能夠在一個頁面中加入多個顏色選擇控件,然後每個控件關聯到頁面中的一個元素比如:文本輸入框。


Farbtastic
 jQuery Color Picker 

一個簡單的顏色選擇控件。操作方式與Adobe Photoshop中顏色選擇操作置。


jQuery Color Picker

 iColorPicker 

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


iColorPicker


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

右鍵菜單類

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

 

 ContextMenu 

用於創建右鍵彈出菜單的jQuery插件。


ContextMenu

 

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

圖片新聞flash展示類熱點圖書:www.hotbook.cn

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

 

 imgAreaSelect 

imgAreaSelect這個jQuery插件能夠選取一張圖片中一個矩形區域。


imgAreaSelect

  Easy Slide 

EasySlide 是以jQuery爲基礎開發的一個圖庫展示插件,EasySlide可以將任何一個網頁容器(Container)內的圖形自動將其排列展示,並加上鼠標指向時的暫停效果(Pause),可以當作圖庫展示或是動畫及廣告Banner使用。


Easy Slide


 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
 jQZoom 

基於jQuery開發的圖片放大鏡插件。


jQZoom

 jQuery Plugin: Text Highlight 

利用javascript對頁面中的關鍵字進行着色的jQuery插件。


jQuery Plugin: Text Highlight
 jCarousel Lite 

這個jQuery插件能夠幫助你以滾動(carousel)的方式來組織圖片和其它內容。


jCarousel Lite


 jCarousel 

jCarousel是一個jQuery插件用於控制一個列表項目的水平或垂直順序,列表項目的內容可以是靜態HTML內容或通過AJAX加載的內容。可以向前或向後滾動。


jCarousel

 Spacegallery-Jquery 

一個採用jQuery開發,類似於Flash效果的圖庫(image gallery)。


Spacegallery-Jquery
 jQuery Slider Gallery 

這是一個基於jQuery開發相冊控件,類似於Apple網站上用於展示產品的效果。


jQuery Slider Gallery

 jQuery Cycle Plugin 

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


jQuery Cycle Plugin

 Zoomimage 

該jQuery插件能夠讓以當前流行的方式來展示圖片。提供:預加載圖片提示,對圖片進行分組,自動調整圖片顯示比例,圖片分組瀏覽控制。


Zoomimage


 prettyPhoto 

prettyPhoto是jQuery lightbox的一個“克隆”。並增加動畫效果,圖庫瀏覽等特性。


prettyPhoto


 ThickBox 

ThickBox是一個模式對話框UI控件。基於jQuery開發,可以用來展示單張或多張圖片,內嵌的內容,iframed的內容,或通過Ajax獲取的內容。


ThickBox

 Galleria 

Galleria 是一個採用jQuery開發的圖片展示插件。它通過縮略圖導航一張一張的顯示大的圖片。支持通過CSS設置整個相冊的風格。能夠按比例創建縮略圖並剪切成適合在縮略圖容器中顯示的小圖片。能夠觸一些事件,因此可以在圖片加載時執行一些動作。


Galleria

 jQuery Flash Plugin 

一個jQuery插件用於在頁面中嵌入Flash影片。


jQuery Flash Plugin

 jQuery.SerialScroll 

jQuery.SerialScroll是一個用於創建滾動效果的jQuery插件,支持水平/垂直方向滾動和混合滾動效果。


jQuery.SerialScroll

 InnerFade 

InnerFade這個jQuery插件能夠讓任意一組元素(img,div等)實現淡入淡出播放效果。


InnerFade

 NyroModal 

一個基於jQuery開發,非常靈活和可定製外觀/動畫效果的模式對話框。可通過Ajax調用目標內容,改變對話框大小等。


NyroModal

 CrossSlide 

CrossSlide這個jQuery插件實現了一些常用Javascript幻燈片放映動畫效果如:動態地移動、縮放、漸變、滑入"滑出等。


CrossSlide

 Magnify 

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


Magnify


 Img Notes 

用於當鼠標移到圖片是時,顯示一個信息提示框。


Img Notes
 FancyZoom 

FancyZoom採用縮放效果來展示圖片或任意HTML頁面,不需要另外開啓頁面來載入圖片,其效果在Apple Mac的官方網站中也有。


FancyZoom

 Jcrop 

Jcrop 是一個跨瀏覽器的jQuery圖片剪切插件(jQuery image crop plugin)。支持對剪切框加CSS樣式,當選取或拖動時添加回調事件(Callbacks),剪切時能夠約束寬度與高度。


Jcrop
 Galleriffic 

Galleriffic是一個用於創建快速展示相冊中照片的jQuery插件。圖片既可以以幻燈片的方式查看,也可以手動點擊縮略圖查看。Galleriffic還支持分頁,從而使得它能夠展示更多的圖片。


Galleriffic
 Image Upload and Auto Crop 

採用PHP+jQuery開發的圖片上傳和剪切(Crop)工具。


Image Upload and Auto Crop

 prettyGallery 

prettyGallery是一個圖庫導航控件Slider。基於jQuery開發,除了可以導航圖片之外,還支持其它任何內容。可以配置導航滾動速度和圖片標題說明。


prettyGallery
 jQuery.popeye 

jQuery.popeye 這個插件能夠將一組無序的圖片列表轉換成一個簡單的相冊。當點擊圖片時將以Lightbox風格放大圖片。圖片展示框提供向前/向後控制並能夠爲每一張圖 片添加備註說明信息。jQuery.popeye能夠根據圖片大小自動調整展示框的高度和寬度。


jQuery.popeye
 s3Slider 

s3Slider 是一個jQuery slideshow插件,效果類似於smooth slideshow

可以在圖片上的任意位置,透明顯示當前所放映圖片的說明信息。


s3Slider

 Pirobox 

採用jQuery開發的Lightbox控件。能夠根據瀏覽器窗體大小自動調整展示圖片大小。提供向前/向後控制鏈接。動態加載圖片效果。易於定製。


Pirobox

 Simple Controls Gallery 

這是一個採用jQuery開發的圖片slideshow控件。提供一個暫停/播放/向前/向後展示的控制菜單。這個jQuery slideshow可以設置當頁面打開時自動播放圖片並能夠將最近查看的圖片存儲在cookie中。


Simple Controls Gallery

 Agile Carousel 

Jquery Slideshow插件。易於定製圖片切換效果。提供開/關圖片標題顯示,添加文本水印等功能。


Agile Carousel
 jQuery Plugin-Page Peel 

這是一個用於創建Page Peel(卷頁/頁面剝落)特效的jQuery插件。


jQuery Plugin-Page Peel


 Easy Slider 

一個jQuery插件,當點擊導航按紐時可以水平或垂直播放圖片或其它任何內容。


Easy Slider
 imgPreview 

圖片預覽jQuery插件。當鼠標移到圖片鏈接上時,會在鏈接的旁邊出現一個類似於tooltip效果的圖片展示框。


imgPreview
 Jquery Fade In.Fade Out 

這是一個用於讓圖片產生淡入淡出效果的jQuery插件。


Jquery Fade In.Fade Out


 Captify 

這個jQuery插件能夠在圖片上顯示標題信息,當鼠標放到圖片上時滑動出現。


Captify
 jParallax 

這是一個用於生成視差現象的jQuery插件。mParallax能夠產生的效果與jParallax一樣但採用Mootools框架開發。



jParallax

jQuery---運用圖片預加載技術打造幻燈片

截圖:





一些演示:
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

jQuery pageSlide

11種控制內容展示的JavaScript特效

jQuery pageSlide 是一個jQuery插件,它可以控制一個隱藏頁面的顯示和關閉。具體來說,就是當前頁佔一個完整頁面,隱藏頁是看不到的,你設置一個控制的地方,點擊該控制時觸發事件,隱藏的頁面就彈出來。再次點擊隱藏頁面以外的空間,它就又關閉。

這適合在有限的空間裏,在主頁裏放重要內容,而隱藏頁放一些並不一定要顯示,而是有需要的用戶纔去展開顯示的內容。

Creating a Slick Auto-Playing Featured Content Slider

11種控制內容展示的JavaScript特效

Niall Doherty的 Coda Slider 爲許許多多的設計師帶來了靈感. Chris Coyier 創建的這個Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ,實現我們常說的”圖片焦點特效”。多用於門戶站。

Portfolio Layout Idea Using jQuery

11種控制內容展示的JavaScript特效

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

它在頁面兩邊顯示帶縮略的作品列表,當你點擊每個條目時,會在中間部分以退場然後進場的特效呈現出該作品的全部內容。

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

 

很多圖片網站用了這種技術,Google圖片中心也不例外。
這種技術的圖片是先顯示模糊的,然後再顯示清楚的。

這個模糊的原理就是 一張小圖片,然後把尺寸放大,大小等於大圖片的寬度和高度。
小圖片被拉大了,理所當然就模糊了。

試想:小圖片的尺寸是10kb,大圖片的大小是500kb,那麼加載小圖片的速度就是大圖片的50倍。
當然你會說,如果直接顯示大圖片是什麼情況呢?答案是:一片空白等着你。

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

 使用jQuery實現網頁報紙

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

原理:使用報紙內容作爲 背景圖,相對定位。
然後裏面的div設置爲絕對定位,大小,left和top都要跟背景圖匹配。
所以這個有一定的規律。

下載:
http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar

引申:
當後臺人員問,每次要傳座標,寬度和高度不麻煩麼?用戶知道使用麼?
教用戶使用photoshop?。。。!!!
解決方案:
使用圖片截圖的插件即可,一般的截圖插件都能獲取4個座標,寬度和高度,
當然我們只需要這些,並不需要把圖片真正截取下來。

 

jQuery購物網站產品展示.




程序介紹:
1,點擊大圖可以彈出遮罩效果.
2,下方小圖可以左右滾動.
3,點擊新窗口打開,可以打開當前的大圖片.
4,遮罩層中小圖也可以左右滾動,也可以打開大圖片.

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


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

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

Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 創建的圖片展示效果,包括縮略圖、圖片標題和描述等詳細功能,是一個非常不錯的高質量畫廊相冊展示工具。

2,ZoomImage

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

3,EasySlider

Easy Slider 可以實現圖片或其他任意內容,在水平或垂直方向上的滑動效果,你還可以通過 CSS 自定義設置樣式。

4,The Slider from Barack Obama’s website

一個源自美國總統 Barack Obama 網站的垂下滑動菜單控制的圖片幻燈效果。

5,CodaSlider

CodaSlider,又一個不錯的滑動控制效果。

6,jQuery Slider II

jQuery Slider II 的佈局非常符合操作習慣,在底部列出帶滾動條的縮略圖控制列表,然後在上面顯示對應圖片的大圖瀏覽,非常適合做高級相冊。

7,Beautiful Slider 熱點圖書:www.hotbook.cn

Beautiful Slider, 光看這個效果圖你就知道這個插件有多棒了吧,是的,這個插件實現的效果已經不遜色於Flash完成的效果,整體表現流暢,文字顯示效果更是創意獨特。

8,LoopedSlider

loopedSlider是又一個任意內容滾動切換的幻燈片插件,使用操作簡單。

9,SpaceGallery

Accessible news slider

SpaceGallery是一個全新的jQuery插件,點擊當前圖片,會自動放大消失,同時後面的圖片向前展示,有一種時光機器的感覺。

10,jQuery Popeye

11,Noobslide 熱點圖書:www.hotbook.cn

Noobslide

12,Accessible News Slider 熱點圖書:www.hotbook.cn

Accessible news slider

13,SmoothGallery 熱點圖書:www.hotbook.cn

SmoothGallery

SmoothGallery是一個最好的 Javascript 幻燈片效果之一,可以實現各種不同的幻燈片轉換效果。

14,jQuery Multimedia Portfolio

jQuery Multimedia Portfolio

jQuery Multimedia Portfolio是一個基於jQuery 的滑動效果插件,除了可以展示圖片之外,還可以加入各種不同類型的多媒體文件。

15,s3Slider

s3Slider是一個非常簡單實用的流暢幻燈片效果,這個插件被應用在無數的WordPress專業主題模板中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章