40 個實用的jQuery技術與應用程序
Contextual Slideout Tips With jQuery & CSS3
Knowing the importance of HTML standards, authors are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.
Revealing Photo Slider
Jonathan Snook has an article up “Content Overlay with CSS” in which extra content is revealed in a certain area when it is moused over. This inspired author to try to do something similar with jQuery. His first thought was a thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.
Fancy Box
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
Scrollable
Scrollable is the most successful tool in jQuery library. Any size and shape. Infinite loops and more. You can scroll through these elements by clicking on the arrow buttons or using the left and right arrow keys from your keyboard.
Smart tooltips
These tooltips will act a little bit smarter than our basic version. The script will skip links with empty or missing title tags, but more important: the tooltips will try to stay in the browser viewport.
Create slide tab box
There are so many kinds of tabbed menu nowadays. Still author really like the sliding effect (such as in Coda website). Luckily, thank to jQuery, we could reassembly this effect and trust him it only takes a few minutes (He is not such a hard-working developer to write something longer then that).
jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It’s a good “space-saver” and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.
jQuery plugin: Easy Accordion
A couple of months ago author found hisself looking for a jQuery plugin to create a horizontal accordion. He needed a simple and clean solution for one of his projects and, at a first glance, Slidedeck seemed to be what he was looking for. Unfortunately, this turned out to be not that flexible as he wished it to be. Hence, he decided to create his own horizontal accordion plugin.
Animate Panning Slideshow with jQuery
Be the end of this tutorial, we’ll have a slideshow that transitions by changing the visible window. You will need to download two plugins for this tutorial: one for easing animations and one for timing slide changes.
Blockster transition effect
Blockster is a Javascript transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block.
Making a Custom 油Tube Video Player
Today we are going to make a jQuery plugin which uses 油Tube’s chromeless player, and creates our own set of minimalistic controls, which allows for perfect integration with your designs. The supported controls include a Play/Pause/Replay button, and a clickable progress bar.
Sexy Drop Down Menu w jQuery
In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.
Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time.
Custom Animation Banner with jQuery
In today’s tutorial we will be creating a custom animation banner with jQuery. The idea is to have different elements in a banner that will animate step-wise in a custom way.
Full Page Image Gallery with jQuery
In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.
Randomizer App w/ jQuery
The app is divided in three steps – in step one you provide a list of the contestants’ name and email, divided by a comma (each contestant on a separate line). In the second step, you provide a prize name and a number, signifying the number of copies that have been offered. In the last step, you get a randomly selected list of contestants and their prizes.
Animated Drop Down Menu with jQuery
Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.
Making an Interactive Picture with jQuery
In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).
A jQuery 推ter Ticker
In this tutorial we are going to create a pure jQuery & CSS 推ter ticker which utilizes 推ter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.
jQSlickWrap
jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.
Animated Text and Icon Menu with jQuery
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
Image Wall with jQuery
Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and
jQuery look: Tim Van Damme
The two key effects Tim is using are a simplified accordion and a hover effect. It’s worth noting that the hover effect only works in WebKit (Safari & Chrome), but he will show you how to create the effect using jQuery too.
How to Load In and Animate Content with jQuery
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page
Nivo Slider
The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning.
HTML5 and jQuery Techniques to Build a Webpage
In this tutorial, we are going to build a web page using HTML 5, CSS and jQuery techniques. The tutorial aims to demonstrate how to build a website when the specifications are finalized.
Latest Post Blogroll Slider with jQuery and PHP
In this tutorial we are going to create a blogroll slider that shows the latest post of your favorite blogs. We will be using jQuery, PHP and XSL. The aim is to get a given RSS feed of a blog and parse the XML data with the help of PHP.
Making a Photoshoot Effect With jQuery & CSS
We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.
Coding a Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
Slider Gallery
This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen.
Making Better Select Elements with jQuery and CSS3
the select elements are impossible to change beyond a certain extent. This is why, today authors are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.
Jquery Tutorial : Toggle Effect on Hover/Click
Today we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output.
Creating an Animated 404 Page
We are going to create an animated 404 page, which you can easily customize and improve.
Create Smooth Rotatable Images with CSS3 and jQuery
In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page.
Neon Text Effect With jQuery & CSS
Today we are going to do the first tutorial on the site, which is both design and code oriented, to bring you the full web development experience.
Bubbleriffic Image Gallery with jQuery
In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse.
Animated Portfolio Gallery with jQuery
Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item.
