Category Archives: jQuery
2011/07/05 15個jQuery for Menu下載與教學
The naviDropDown plugin allows you to create a simple drop down menu, utilizing hoverIntent, and jQuery’s own slideUp and slideDown effects. You can also set the orientation of the drop down to either horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin.
naviDropDown 1.0 PluginView the Demo
Drill Down Menu Plugin
This plugin will take any standard nested list and turns it into an iPod-style drill down menu. Drill down menus typically offer an excellent method for managing and organizing large and complicated menus into a small, compact and fixed-sized area. Features of this plugin include: Saved state using cookies, add count of total number of child links to each menu option and offers 2 different methods to navigate (breadcrumb style or back button to return to previous option).
Drill Down Menu PluginView the Demo
Memu – A simple CSS & jQuery Menu
This small and very easy to use jQuery plugin can be used with or without jQuery (if you don’t want any JS on your page, just get the CSS).
Memu – A simple CSS & jQuery MenuView the Demo
Vertical Mega Menu Plugin
This plugin creates vertical mega-menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item. There are several plugin options available for customizing the mega menu, you can: Choose the animation effect of the flyout menu, set the animation speed, set the number of sub-menus per row, display the flyout mega-menu on the left or right depending on the menu position and more.
Vertical Mega Menu PluginView the Demo
Simple Flickr Style Tooltip Menu
This tutorial will show you how to create a Flickr-style tooltip drop down menu.
Simple Flickr Style Tooltip MenuView the Demo
Mega Drop Down Menu Plugin
This jQuery Mega Drop Down Menu plugin takes any standard HTML nested list and turns it into a horizontal mega menu. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation for any website.
Mega Drop Down Menu PluginView the Demo
Dropdown Google Style Menu
In this tutorial you will be shown how to create a Google-style dropdown menu. If you check the Google source code you will see far too many divs, uls, lis, and span elements, the idea with this tutorial is to do the same but without those extra elements.
Dropdown Google Style MenuView the Demo
Cool Animated Menu
In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Initially learning how to build the concept in Photoshop and then laying out the basic HTML elements, styling everything with CSS and then bringing it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.
Cool Animated MenuView the Demo
Vertical Accordion Menu
The plugin takes standard html nested lists and turns them into versatile vertical accordion menus.
Vertical Accordion MenuView the Demo
Horizontal Dropdown Menu
In this tutorial you’ll be shown how to create a simple, usable and functional horizontal menu with HTML and CSS. You will also use jQuery to add some drop-down animation to the menu.
Horizontal Dropdown MenuView the Demo
Dropdown Login Form
This is an easy to implement and lightweight simple jQuery dropdown login form.
Dropdown Login FormView the Demo
Flashy Navigation with easing and hoverIntent
With this plugin you can make your navigation a little bit more flashy. It makes use of easing and hoverIntent and you can customize the rollover colors, easing method and duration.
Flashy Navigation with easing and hoverIntentView the Demo
Floating Social Bar with jQuery and CSS
From creating the PHP file to customizing the CSS, this tutorial will guide you through the steps to build a fancy floating bar similar to the Meebo and Wibiya bars.
Floating Social Bar with jQuery and CSSView the DemoView the Demo 2
Expanding Image Menu
In this advanced and unique tutorial you will learn how to create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when clicked.
Expanding Image MenuView the Demo
Animated Content Menu
With this tutorial you will create a slick animated content menu with jQuery. The menu items will be animated and when clicked, a content area with further information will appear and the background image will also change according to which menu item was clicked.
Animated Content MenuView the Demo
Overlay-like Effect
You will create a slick overlay effect with jQuery that does not use an overlay with this tut. The idea is to change the opacity or the color of certain elements in order to make it look like as if you are covering the content with an overlay.
Overlay-like EffectView the Demo
Jquery.ascensor.js

Jquery.ascensor.jsView the Demo
- Leave a comment
- Posted under jQuery, 免費下載
2011/07/05 Sliding style jQuery!!
- Leave a comment
- Posted under jQuery, 免費下載
2011/06/24 36個超有用的jQuery
我應該有說過不下上百次我有多愛jQuery了吧 因為它呈現出來的效果實在太討喜了 會有一種普通家庭主婦變貴婦的感覺 整個就是升級嘛!!好啦好啦 說再多都一樣 就是愛!!一起來看一下今天的介紹吧 (有些之前也有貼過 那就複習一下好了)
jQuery and CSS Slider
Circular Image Galleries With jQuery
Tiny Circle Slider
Awesome Scrolling Navigation using jQuery
Sliderman
jQuery Image Gallery with Play Pause Rotation
jQuery Flipped Image Gallery
Anything Slider
Coda Slider
Flickr Slideshow
jQuery Image Gallery Plugin
jbGallery
Lightweight Thumbnails Gallery
jQuery Scrollable
Carousel Plugin For WordPress
SlideJS
Slick Slideshow
Content Slider
Mootools Slider With Two Knobs
jQuery and CSS Mobile App Website Effect
jQuery Slideshow With Mask Transition
jQuery Infinite Carousel
Rotating Image Slideshow w/ CSS3 and jQuery
Sideways: jQuery Fullscreen Image Gallery
Galileory jQ
Simple jQuery Slider
source / demo
Moving Boxes jQuery Slider
jDigiClock jQuery plugin
source / demo
Orbit: Countdown Image Slider Plugin
Modern Gallery Using Raphael Library and jQuery
SlideDeck
source / demo
jQuery Before After Photo Effect
Slinky Slider
Easy Slider
JMyCarousel
source / demo
Flickr Gallery
source / demo
MopSlider
source / demo
Fullscreen Gallery
3D Wall Gallery
- Leave a comment
- Posted under jQuery, 免費下載
2011/06/11 10 jQuery客製捲軸下載
1. jScrollPane – custom cross-browser scrollbars
Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled.

2. Plugin JQuery : Scrollbar
This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.
The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizible space of a div for example. It is aimed to the people who don’t want a default scrollbar. Whell scroll management is also included in this but is not activated.

3. Tiny Scrollbar – A lightweight jQuery plugin
Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface. It can scroll vertical or horizontal, supports scrolling by wheel, thumb, or track and the mimified the size is 2,29 kb

4. jQuery Custom Content Scroller
A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.

5. jQuery Scrollbar replacements
These scrollbars are fully themable allowing their behaviour to be determined as well as their look. This script uses the ‘jquery.corner’ plugin for the lovely cross-browser rounded corners and ‘jquery.drag’ for more reliable drag event registering.

6. Scrollbar Paper
Scrollbar Paper does not replace browser’s default scrollbar.
Instead, it covers it with a custom scrollbar, like paper on a wall: that is why it is called Scrollbar Paper.
The benefit of this approach is that the way browser’s default scrollbar behaves is not modified: mouse wheel support, text selection and scrolling performance are the same as usual.

7. A custom scrollbar for a DIV
This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.

8. ShortScroll – A jQuery UI Google Wave style scroll bar
Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.

9. jQuery Scroll
A jQuery plugin which renders a custom, CSS styleable vertical scrollbar.

10. Vertical scrollbar using jQuery UI slider
The code assumes a single div with fixed height (#scroll-pane in my example) which contains an absolutely positioned div (#scroll-content) which contains the content for scrolling.

- Leave a comment
- Posted under jQuery, 免費下載
2011/06/03 非常實用又漂亮的jQuery工具 (可免費下載喔!!)
jQuery我超愛的 在網頁設計上加個jQuery的功能 整個網站就升級了啊! 現在的網頁時不時就會來個小動畫或是特效 尤其在需要很多照片展示的網站 jQuery就是必要的功能啊! 趕快來看看有哪些很酷的jQuery吧!!
Cloud Carousel (demo | download)
Here is a 3-D carousel, with optional auto-reflection that doesn’t require images to be modified or server code to be added. Accurate 3-D perspective and easy integration with basic valid HTML, all with a tiny bit of JavaScript.
“A new kick-ass jQuery and CSS3 gallery with animated shine effects.” This effect will make user interface elements look like they’re a polaroid photo (or made of glass). The best part is that it’s not that difficult to achieve.
Nivo Slider (demo | download)
Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. It simply converts a wrapper for images into a slider, and it offers nine unique transition effects.
MLB.com Content Switcher with jQuery and CSS3 (demo | download)
The goal of this project was to recreate MLB.com’s switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.
Create Scrollable Interface (demo | download)
This jQuery plug-in creates a scrollable interface with which to scroll over a large image in a small area.
Beautiful Photo Stack Gallery with jQuery and CSS3 (demo | download)
The idea here is to show photo albums with a slider, and when an album is chosen, its images are displayed as a beautiful photo stack. In this stack view, you can browse through images by tucking the one on top under the stack with a slick animation.
Micro Image Gallery: A jQuery Plugin (demo | download)
Minimalistic Slideshow Gallery with jQuery (demo | download)
This simple and beautiful slideshow gallery can be easily integrated in your website. The slideshow is in a container, with options to view a thumbnail grid, pause the slideshow and navigate through the pictures. The grid slides out from above and allow the user to navigate the thumbnails.
Image Slider with Unique Effects (demo | download)
This coin-slider jQuery image plug-in has several transition effects.
Create image gallery in 4 lines of jQuery (demo | download)
Slideshow with strip effects (demo | download)
jqFancyTransitions is an easy-to-use jQuery plug-in for displaying photos as a slideshow with fancy transition effects.
Nivo Zoom is a free jQuery image zoomer intended as a replacement for a lightbox.
AD Gallery, gallery plugin for jQuery (demo | download)
A highly customizable gallery and showcase plug-in for jQuery.
Animate Panning Slideshow with jQuery (demo | download)
Image Scale Carousel (demo | download)
When working with images online, keeping the aspect ratio intact is as important as anything. That is what’s so nice about this jQuery plug-in: you don’t have to worry about sizing all of your images perfectly. It auto-scales your images for you, making implementation super-simple.
Sudo Slider (demo | download)
Essentially, Sudo Slider is a slider plug-in that allows you to do whatever you want, with whatever HTML you want. It’s both a content and image slider
GALLERYVIEW (demo | download)
GalleryView is a content gallery plug-in capable of displaying any HTML content in an animated gallery view. Visit the project’s home page for documentation and demonstrations.
Jquery Plugin MopSlider 2.4 (demo | download)
MopSlider is a slider box that can contain any item with a set height and width. With version 2.5, MopSlider can be added to a page however many times you want. An auto-move function is included.
jQuery Image Scroller (demo | download)
Making use of jQuery’s excellent animation features, this image scroller is completely autonomous and begins scrolling once the page loads. The finished widget is completely cross-browser compatible and performs as expected in the latest versions of the most common browsers.
Image Gallery Using jQuery and Flickr (demo | download)
jQuery plugin: Wilq32.RotateImage (demo | download)
This is the product of the Wilq32.PhotoEffect snippet. You can use this tiny script to rotate images (at any angle) directly on the client side (e.g. with user-generated content) and animate them using your own functions.
jQZoom Evolution (demo | download)
JQZoom is a JavaScript image magnifier built on jQuery. The script makes it easy to magnify whatever you want.
Photo gallery using jQuery and VisualLightBox (demo | download)

YoxView is a free lightbox-type media and image viewing jQuery plug-in. It’s easy to use and feature-rich.
Supersized (demo | download)
This plug-in resizes images to fill the browser while maintaining their dimensions. You can cycles images and backgrounds in a slideshow with transitions and preloading. And navigation controls allow for “Pause/Play” and “Forward/Back.”
AnythingSlider (demo | download)
Photo Revealer (demo | download)
With this, you get a line of cropped thumbnails on a string. Clicking the “More Info” button expands a photograph to full size and reveals additional information. Photos are loaded on page load, so there is no waiting after clicks.
Auto-Playing Featured Content Slider (demo | download)
This is an alternative to the jQuery Coda Slider plug-in. With this, a slide can be any kind of HTML content whatsoever, even a full-size image with overlay. Each slide has a unique thumbnail that, when clicked, takes you to the corresponding slide, with an arrow above indicating the active panel. And it auto-plays!
Horinaja is a ready-to-use slideshow that can be used with either Scriptaculous/Prototype or jQuery. It allows you to use the mouse wheel for navigation; when the mouse is outside of the slideshow area, it scrolls; when hovering over the slideshow, scrolling pauses.
This one’s easy. First, enable the jQuery library, and then include the S3 Slider JavaScript in the head of the page where you want to use it.
Slide Deck (demo | download)
SlideDeck is a powerful plug-in that lets you organize any type of content into a beautiful and user-friendly slider.
Galleriffic (demo | download)
A jQuery plug-in for rendering rich fast photo galleries.
Photo Gallery – Dark Theme (demo | download)
GalleryView decides the best way to animate your filmstrip. When the gallery is wider than the filmstrip, the filmstrip remains stationary and the pointer slides from frame to frame. When the filmstrip is too long for the gallery, the pointer remains still and the filmstrip animates beneath it.
jQuery morphing gallery (demo | download)
A gallery that “morphs” images between transitions.
Simple Accordion w/ CSS and jQuery (demo | download)
Designed and implemented with usability in mind, this accordion can come in very useful when organizing a good chunk of content.
Automatic Image Slider w/ CSS & jQuery (demo | download)
Create a Slick and Accessible Slideshow Using jQuery (demo | download)
A usable and accessible slideshow widget for your website that uses HTML, CSS and JavaScript (via jQuery).
Fancy Thumbnail Hover Effect w/ jQuery (demo | download)
Coda Slider Effect (demo | download)
Simple Controls Gallery (demo | download)
Want to display images as an automatic slideshow that can be played or paused by the user? Simple Controls Gallery displays an image by fading it into view over the previous one. Navigation controls pop up when the mouse rolls over the gallery.
jQuery.popeye is an advanced image gallery script built on jQuery. Use it to save space when displaying a collection of images, and offer users an elegant way to show big versions of images without disrupting the page flow.
Simple demo (demo | download)
ImageFlow is an unobtrusive and user-friendly JavaScript image gallery.
Moving Boxes (demo | download)
SlideViewerPro (demo | download)
SlideViewerPro is a fully customizable jQuery image gallery engine that allows you to create outstanding sliding galleries or interactive galleries in blog posts.
jQuery simple panorama viewer (demo | download)
This small plug-in for jQuery will display any image on the page that has the class panorama as an interactive panorama.
A Beautiful Apple-style Slideshow Gallery (demo | download)
Flickr Photobar Gallery (demo | download)
The aim here was to build a bottom photo bar that one could easily integrate into a website. It is hidden initially and slides up when the handle is clicked. The photo sets are first shown and when one of them is chosen; all of the set’s images can be viewed as thumbnails; when a thumbnail is clicked, the full view appears as an overlay.
Step Carousel Viewer (demo | download)
Step Carousel Viewer displays images and even rich HTML by side-scrolling them left and right. Users can jump to any panel on demand or browse the gallery by scrolling through any number of panels at a time. A smooth sliding animation is used to transition between items. And don’t worry, you can tame this script to do exactly want you want: two public methods, two custom event handlers, and three “status” variables are available for this purpose.
Box Slider (demo | download)
jQuery Panel Gallery (demo | download)
An attractive and beautiful image slideshow plug-in, with a classic transition effect.
Image Highlighting and Preview with jQuery (demo | download)
A nice way to allow users to view bigger versions of images with some context.
Interactive Photo Desk (demo | download)
With this utility, photos can be dragged and dropped, stacked and deleted, with each action resembling a real-world action.
Multimedia Gallery for Images, Video and Audio (demo | download)
Awesome Mobile Image Gallery Web App (demo | download)
A simple mobile image gallery, using the amazing jQTouch jQuery plug-in for mobile Web development. jQTouch has native animations, automatic navigation and themes for mobile Webkit browsers like those on the iPhone, iPod Touch, G1 and Pre.
- Leave a comment
- Posted under jQuery, 免費下載




































































































