95+强悍的jQuery图形效果插件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

现在的网站越来越离不开图形，好的图像效果能让你的网站增色不少。通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果。

使用JQuery插件其实比想象的要容易很多，效果也超乎想象。在本文中，我将介绍超过95个JQuery图形效果插件，它们都可用于图像不同方式的呈现，尤其是在创建动态的艺术网站的时候，JQuery将给你完美的解决方案。你可能需要不同功能和效果的JQuery插件，比如你创建一个在线的电子杂志，这个时候你可能需要jQuery翻书插件。另外一个常见的流行效果是图像或内容幻灯效果，你可以创建超酷的滚动效果。

如果你有用到或发现好的JQuery插件，欢迎给我消息，我会在后续的时间更新本文，然后分享给更多的朋友。

原文地址：http://www.goodfav.com/jquery-image-effect-plugins-3703.html

文章索引

这篇文章有点长，我决定按照jQuery 图像效果进行分类.

• jQuery Image Carousel Plugins
• jQuery Image Slider Plugins
• jQuery Image Grid and Gallery Plugins
• jQuery Image Zoom Effect Plugins
• jQuery Image Hover Effects
• Other jQuery Image Plugins

jQuery Image Carousel Plugins

jQuery image carousel design elements that are useful for featuring multiple images and content. Carousels are designed in such a way that previous and next slides are partially visible. This often gives visitors a realistic 3D experience.

Showbiz Pro Responsive Teaser JQuery Plugin - MORE INFO / DEMO

Showbiz Pro is a highly customizable plugin to show you or your customer’s services, portfolio items, blog contents… basically all business information thinkable.

Sky jQuery Touch Carousel – MORE INFO / DEMO

Sky jQuery Touch Carousel is a jQuery carousel plugin with rich set of features. It is responsive, touch-enabled, fast and smooth. It can be easily integrated into your own web projects. You can customize the visual appearance of the plugin with the help of the plugin options and CSS.

jQuery Content Scroller DZS – MORE INFO / DEMO

DZS Content Scroller is a solid, advanced, fully responsive jQuery plugin to scroll content. It can be a html content scroller, a banner rotator or even a image gallery due to the fact that it support inline contentand it includes two viewing modes. The first one, is to automatically calculate how many elements fit in the container and then scroll them, and because it is responsive, it will auto adjust elements to your screen size. The second one is to resize only one element to fit in the container, this is ideal for galleries or cases where you need to showcase only one item on the full width.

3D Touch Carousel – MORE INFO / DEMO

3D Touch Carousel is a jQuery javascript plugin for creating a carousel gallery. It supports simulate 3d mode and real 3d mode powered by CSS3 . Also it has reflection for the images, and can be set titles to show on image. Touch events are supported on Android and IOSX devices.
Titles can be personalizzed with custom effects to show. This plugin can be ease integrate with light box like systems.

Versatile Touch Slider – MORE INFO / DEMO

Versatile Touch Slider is a jQuery plugin that offers a variety of options. It may just be a banner rotator or a shelf to display products. Has the touch feature to mobile and drag for the desktop. The navigation can also be done via buttons and menu. Through the lightbox it is possible show multimedia content (video, audio, image and html content).

Ultimate Slider – MORE INFO / DEMO

Ultimate Slider is capable of holding anything you can place in a div, it designed to be versatile so it’s easy as adding an extra panel div to create an entire new section for the slider. Additionally you can add a new section in the panel by adding a new col div and the panel as well as other cols will auto adjust to accommodate your new addition.

Spacegallery – jQuery plugin MORE INFO

Space Gallery uses a fresh method for displaying a slideshow of images. When you click on the gallery it will, with a nice transition effect, rotate to the image behind. The gallery and its transitions can be easily customised with fairly extensive array of functions.

jQuery Image Slider Plugins

jQuery slider plugins are among the most popular scripts at the moment. We see image and content sliders on almost any business style website. The slider design element is often used above the fold on front pages to make a special presentation of key content and products.

Full Width Slider 2 – MORE INFO / DEMO

Full Width Slider 2 is easy to use jQuery image slider optimized for full screen width.

pageAnimate Web-Page Slider – MORE INFO / DEMO

This jQuery plugin is a full page slider for navigating between web pages. For example, you could have your home page on one slide, contact page on another, and so on.

Responsive Layer Slider jQuery Plugin – MORE INFO / DEMO

We present Responsive Layer Slider. It is fully HTML & jQuery driven. Works on desktop and mobile devices! You get the same experience on every platform because responsive design makes it look good on all resolutions. For mobile devices this slider is touch enabled, the standard UI is turned off because there is no need for it. You get full control over each layer, you can animated it in almost 200 different ways.

Parallaximus — Responsive 3D Parallax Widget – MORE INFO / DEMO

Easy to use javascript plugin which allows you to decorate your site with responsive 3d parallax widgets (banners), each of which is a pleasure to interact with not only on desktop browsers but also on modern mobile devices.

jQuery Responsive Banner Rotator Plugin – MORE INFO / DEMO

jQuery Responsive Banner Rotator Plugin is a responsive slider which you can use to display yourimage, customer testimonial, quote etc. It works fine in the mobile device.

Lush – Content Slider – MORE INFO / DEMO

Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers.
It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.

Dynamic Slider – MORE INFO / DEMO

Dynamic Slider is a flexible slider that allows the customization of all of its components giving the possibility to create a large number of different layouts and configurations. It is lightweight and easy to work with and customize.

xSquare – Responsive Image Slider html5/jquery – MORE INFO / DEMO

xSquare is a responsive jQuery image slider. It has a layout that consists of grids making it useful for variety of web page positions. Though the main purpose of the image slider is within a banner position it can easily be implemented as an image gallery or something similar because it is compatible with lightbox, prettyPhoto etc. The loading of images is done via smart lazyLoad with an implemented loader. Effective sliding transitions make the slider have a more dynamic look.

Parallax Slider – Responsive jQuery Plugin – MORE INFO / DEMO

Supersized 2.0 MORE INFO / DEMO

Supersized cycles images with transitions and preloading. It offers several useful features fx. Transistions: Fade, Sliding (Up, Down, Right, Left), and None. It automatically resizes images to fill browser while maintaining image dimension ratio.

AnythingSlider jQuery Plugin MORE INFO / DEMO

AnythingSlider is an attempt at bringing together the functionality of all of those previous slidersand adding new features. In other words, to create a really “full featured” slider that could be widely useful.

Creating a Slick Auto-Playing Featured Content Slider MORE INFO / DEMO

This slider offers a a fun way to show lots of content in a small area.

Full Screen Image Gallery Using jQuery and Flickr MORE INFO / DEMO

The Full Screen Image Gallery plugin is full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It comes packaged with a flickr search engine, thumbnails, captions, and with a preloader. It basically loads image links one by one and replaces it with a full screen image gallery and it scales the image using CSS only (with some JS for IE6).

CrossSlide MORE INFO

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.). This is a great solution for creating dynamic effects fx. in a header.

Easy Slider 1.7 – Numeric Navigation jQuery Slider MORE INFO

Great slider plugin for content and images.

portfolio website templates, however, when available as a jQuery plugin it is not too hard to insert yourself.

Megafolio Pro Responsive Grid JQuery Plugin – MORE INFO / DEMO

Megafolio Pro is a fully responsive media grid plugin that allows you to display content in almost every way possible using preset or randomly generated layouts. Dive right into the action by taking a look at ourpreviews, showcasing just a few examples of whats possible with Megafolio Pro!

Responsive Tile Gallery – MORE INFO / DEMO

Responsive Tile Gallery is a completely responsive image gallery. It allows your visitors to easily sort and view all of your images. It also allows you to put your images into categories, load thumbnails instead of full resolution images, and develop responsive websites for all platforms.

Nova Gallery – Responsive HTML5 Multimedia Gallery – MORE INFO / DEMO

Nova Gallery is a HTML5 multimedia gallery enabling you to showcase your photos/audio/video in a beautiful and sleek interface. You have the option of presenting your items in two different modes, which are aThumbnail Grid and Full-width view, and you also have the option of switching between the two modes.

Responsive Slideshow Photo Gallery Grid – MORE INFO / DEMO

The Responsive Slideshow Photo Gallery has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the number of thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow).

JBMarket Image Gallery – MORE INFO / DEMO

JBMarket Image Gallery is JavaScript (jQuery based) script converting unordered list into an Image Gallery with Lightbox.

VuAll – Creative jQuery Grid Slider – MORE INFO / DEMO

Create your own grid slider any size, with unlimited number of images and any image sizes.

GecoGallery – jQuery Plugin – MORE INFO / DEMO

GecoGallery is a jQuery gallery plugin that can be used to display images and text. Thanks to its high customization, it is useful for portfolios, showcases of products, post preview and whatever you can imagine!

Repose Showcase – MORE INFO / DEMO

Repose is a javascript plugin which can be used as an amazing showcase for different stuff. Some awesome stuff that can be showcased using Repose would be portfolio, images, social links, your team, your USP or features, or pricing tables.

jQuery Tiles Gallery – MORE INFO / DEMO

There are plenty of similar galleries out there but jquery Tiles Gallery is the only one with a real complex grid. Other grid galleries are copies of Pinterest, that is already old and outdated.

MelonHTML5 – Metro Gallery – MORE INFO / DEMO

Metro Gallery a flexible and easy to integrate photo gallery featured in Metro Design. It allows you to build your unique photo wall with your custom settings.

Responsive Flickr Gallery – MORE INFO / DEMO

Responsive Flick Gallery is a completely responsive gallery that allows developers to load their images via AJAX using the flickr api.

JQuery Thumbnail Gallery With LightBox – MORE INFO / DEMO

Comes in two layout types (grid and line, vertical and horizontal), withscroll (jScrollPane) orbutton navigation. Thumbnail boxes supportany HTML element inside them.

Crystal Gallery – jQuery Gallery with Blur Effect – MORE INFO / DEMO

Your photography, paintings, and other visual art are beautiful, and deserve to be displayed online in a way that does them justice. The Crystal Gallery jQuery plugin provides a customizable, one-of-a-kind gallery look to fit all your image presentation needs.

jQuery pinterest style gallery plugin – MORE INFO / DEMO

CSS3 driven animation, graceful degradation, it will toggle the fade transition in the old browser.

Creating a polaroid photo viewer with CSS3 and jQuery MORE INFO / DEMO

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. TheCSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

jQuery Dynamic Grid: XML Gallery – MORE INFO / DEMO

This is the first product of a series that uses the Dynamic Grid engine. With Dynamic Grid: XML Gallery you can create the image gallery that you want. The script gives you huge control over the layout and animations, and the possibilities are endless. Literally endless – the script is smart enough to generate unique layouts every time it launches, which means a unique experience for your visitors on every page load.

jQuery Fullscreen Grid Gallery MORE INFO / DEMO

The GridGallery is a jQuery plugin you can use to display your image like photography or other works. The image support both landscape and portrait.

jQuery ImageBoom HTML5 Grid Gallery – MORE INFO / DEMO

ImageBoom is a grid style image gallery that can quickly turn and simple list of images into a sortable, navigable gallery.

AD Gallery MORE INFO / DEMO

I love this gallery plugin. It is simple, yet powerful. It is a plugin that supports many transition efects, ir preloades the images, with cations and… hell, it can pretty much do everything you would want from an image gallery. Just have a look at the feature list.

Glisse.js MORE INFO / DEMO1 DEMO2

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. Simple transitions between two pictures entirely assumed by CSS3 and full screen view.

Highslide JS MORE INFO

Highslide JS is an open source image, media and gallery viewer written in JavaScript. It is an excellent, unobtrusive lightbox-style script with a multitude of uses and is free for non commercial uses. Some of the features include: No plugins required, free user support and configuration options.

jQuery Panel Gallery MORE INFO / DEMO

jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.

Galleriffic MORE INFO

Galleriffic is a jQuery plugin that has been optimized to handle high volumes of photos while conserving bandwidth. This feature rich and easily customizable plugin is fairly easy to install and with its image pre-loading, thumbnail navigation (with pagination) and its integration with the jQuery.history plugin (supports bookmark-friendly URLs per-image) it has become very popular.

Fancy Box MORE INFO / DEMO

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them. Also support media.

Galleria MORE INFO

Is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

jQuery Image Zoom Effect Plugins

When adding high quality images on a website it is sometimes a requirement to allow users to zoom in and see more details. This effect is especially useful on large maps or product presentations.

Zoome – jQuery Image Zoom Effect Plugin MORE INFO / DEMO

Zoome is a jQuery plugin to help you zoom images with hover effect (grayscale, blur, transparent) and you can zoom-in or zoom-out using the mousewheel.

jQuery Mega Image Viewer – animated zoom and pan – MORE INFO / DEMO

The mega image viewer jQuery plugin allows you to easily replace

Zoomer jQuery Products Showcase – with Lightbox – MORE INFO / DEMO

Zoomer! is the definitive tool for showcasing products, with its built-in zoom + panning + dragging features, which can be easily customized due to its flexible theme selector and config parameters, directly from the html file. Also more configurations can be edited through the css style sheet file.

jQuery image zoom effect MORE INFO / DEMO

Tutorial teaching you the technique used to zoom an image thumbnail and display a overlay of text. Really a cool feature to make a specific area gain extra attention.

jQuery.popeye 2.1 MORE INFO / DEMO

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

JQZoom MORE INFO / DEMO

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

AnythingZoomer jQuery Plugin MORE INFO / DEMO

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.

jQuery Image Hover Effects

One of the ways you can add more life to your website is to use image hover effects. There are many cool jQuery plugins you can use to create amazing image hover effects.

Picanim – jQuery image hover effect pulgin – MORE INFO / DEMO

Picanim is jQuery plugin used to bring stylish image hover

Showcase v1.2 – MORE INFO / DEMO

Showcase offers over 60 animation settings that can be applied to each Bullet, providing the maximum level of customization possible. The script is lightweight and amazingly fast, even on Mobile Devices. Create an unlimited number of Showcase Bullets on top of any HTML element.

HoverEx – jQuery image hover animation plugin MORE INFO / DEMO

HoverEx is a jQuery plugin for image hover animations. It contains over 36 animations and prepared 18 hover animation templates, and also supports image zoom and slider effect. You can use it to create unique animated effects effortlessly without any knowledge of jQuery.

HoverEx – jQuery image hover animation plugin – MORE INFO / DEMO

HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.Just make the needs html markup,it will wokr well for you.

Zalki Hover Image – Plugin jQuery – MORE INFO / DEMO

Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes.

HoverAlls v1.3 – MORE INFO / DEMO

HoverAlls is a unique jQuery animation plugin that allows you to create animation effects quickly –without any knowledge of Javascript or jQuery. With over 40 settings, HoverAlls can create unique animations for nearly any type of effect desired.

Side Effect MORE INFO / DEMO

Side Effect is a background image effect. Side Effect can be used to add a nice effect to your portfolio items or photo gallery etc.

Hotspotter – Hotspot Maker jQuery Plugin – MORE INFO / DEMO

Easily create amazing hotspots on your images with just point & click!

Adipoli jQuery Image Hover Plugin MORE INFO

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

Other jQuery Image Plugins

jQ SlickWrap MORE INFO / DEMO

If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS’sfloat, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image. This fixes that.

Make your images interactive, Tag Your Images! MORE INFO / DEMO

Tagyourimages is a jQuery plugin that lets you to make your images interactive. Your images will be able to contain additional information, such as text, images and external link in the exact position that you want.

ThumbFx – Responsive jQuery Thumbnail Effects MORE INFO / DEMO

Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops

bgStretcher jQuery Plugin MORE INFO / DEMO

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).

Easiest Tooltip and Image Preview Using jQuery MORE INFO

An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.

InnerFade with JQuery MORE INFO

It’s designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

ImgTag – Easy photo tagging MORE INFO / DEMO

ImgTag is a script for adding tags (annotation) to your images. With ImgTag the user can move the mouse over specific regions in your image to see a tooltip or a custom effect.

Animated InnerFade MORE INFO

Full w3c compliant animated slideshow with sliding effect on large images. Check it you you need to see the effect.

jQuery spherical panorama viewer MORE INFO / DEMO

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and installMPRemap fromHelmut Dersch website for this purpose.

prettyPhoto a jQuery lightbox clone MORE INFO / DEMO

jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.

jQuery virtual tour MORE INFO / DEMO

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

crop, labelOver and pluck MORE INFO

Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

jQuery Cycle plugin MORE INFO

This is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The effects look very good!

Jcrop MORE INFO / DEMO

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

ImgAreaSelect MORE INFO / DEMO

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

PanView MORE INFO

This plugin allows your visitors view details of a big image and move around with the mouse.

Create an Image Rotator with Description MORE INFO

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

ImageSwitch MORE INFO / DEMO

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when youswitch between images. Minimize the arguments you need to input and still give some decent effects.

Create Featured Content Slider Using jQuery UI MORE INFO

Lightbox Plus MORE INFO / DEMO

Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar. Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

Shadowbox MORE INFO

Shadowbox is an online media viewer application that supports all of the web’smost popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and ishighly customizable. Using Shadowbox, website authors can showcase a wide assortment of media inall major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

PHP & jQuery image upload and crop MORE INFO / DEMO

Awesome solution for allowing users to upload and crop images on your site.

Sliding Boxes and Captions with jQuery MORE INFO

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.