jquery 特效专辑

 

提示框弹窗类

Facebox

Facebox 是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面 。


Facebox
SimpleModal

SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。


SimpleModal
jTip

jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。


jTip


BetterTip

一个可以自定义Tooltip的jQuery插件。基于jTip，但比它来得更加灵活。


BetterTip

clueTip

clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。


clueTip


jQuery lightBox plugin

一个简单，强大基于jQuery开发的lightBox控件。


jQuery lightBox plugin

jQuery Impromptu

用于创建模式对话框，确认对话框，输入内容对话框的jQuery插件。


jQuery Impromptu
jQuery.UI Messenger"Outlook like message notification Widget

这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。


jQuery.UI Messenger"Outlook like message notification Widget

FancyBox

基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容， 通过CSS自定义外观。


FancyBox


Coda Popup Bubbles

采用jQuery开发，类似“冒泡”效果的提醒弹出框。


Coda Popup Bubbles

jGrowl

jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac　OSX系统中Growl事件通知框架。


j Grow l

jqWindowsEngine

这个jQuery插件能够帮助你轻松创建Ajax Windows。


jqWindowsEngine

jQuery Alert Dialogs

这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。





jQuery Alert Dialogs
BeautyTips

BeautyTips是一个jQuery Tooltip插件.


BeautyTips

色彩选择器类

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

Farbtastic

Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。


Farbtastic
jQuery Color Picker

一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。


jQuery Color Picker

iColorPicker

iColorPicker是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。


iColorPicker



热点图书：www.hotbook.cn

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

右键菜单类

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

ContextMenu

用于创建右键弹出菜单的jQuery插件。


ContextMenu

图片新闻flash展示类

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

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

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

Creating a Slick Auto-Playing Featured Content Slider

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

Portfolio Layout Idea Using jQuery

非常漂亮的一个特效布局。由 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

评论

3 楼 keete 2010-10-08  

大开眼界了

2 楼 天梯梦 2010-06-10  

那太好了~~

1 楼 yangzhihuan 2010-06-10  

非常不错,多谢分享.

目前我使用 FancyBox 一切良好,简洁实用啊.