jquery带翻页动画的电子杂志代码分享_jquery

 
 
 
 
 
 
 
 
 
 
 
 Cufon.replace('h1,p,.b-counter');
 Cufon.replace('.book_wrapper a', {hover:true});
 Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
 Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
 Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
 
 
 

 




 
 
 
 Loading pages...
 
 
 
 
 
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.
 The thumbnails will scroll to the end and move back to
 the first image. The user can scroll through the thumbnails
 by using the slider controls. When a thumbnail is clicked,
 it moves to the center and the full image preview opens.
 Article
 Demo
 
 
 
 
Animated Portfolio Gallery
 
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. The image can be enlarged by clicking on it, making
 it appear as an overlay.
 Article
 Demo
 
 
 
 
Annotation Overlay Effect
 
Today we will create a simple overlay effect to display annotations in e.g. portfolio
 items of a web designers portfolio. We got the idea from the wonderful
 portfolio of www.rareview.com where Flash is used to create the
 effect. We will use jQuery.
 Article
 Demo
 
 
 
 
Bubbleriffic Image Gallery
 
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.
 Clicking on a thumbnail will zoom in a big circle and
 the full image which will be automatically resized to
 fit into the screen.
 Article
 Demo
 
 
 
 
Collapsing Site Navigation
 
Today we will create a collapsing menu that contains vertical
 navigation bars and a slide out content area. When hovering
 over a menu item, an image slides down from the top and a
 submenu slides up from the bottom. Clicking on one of the
 submenu items will make the whole menu collapse like a card
 deck and the respective content area will slide out.
 Article
 Demo
 
 
 
 
Custom Animation Banner
 
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.
 
We will be using the jQuery Easing Plugin and the jQuery 2D
 Transform Plugin to create some nifty animations.
 Article
 Demo
 
 
 
 
Full Page Image Gallery
 
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. When a thumbnail is clicked,
 it moves to the center of the page and the full screen
 image is loaded in the background.
 Article
 Demo
 
 
 
 
Hover Slide Effect
 
Today we will create a neat effect with some images using
 jQuery. The main idea is to have an image area with several
 images that slide out when we hover over them, revealing
 other images. The sliding effect will be random, i.e.
 the images will slide to the top or bottom, left or
 right, fading out or not. When we click on any area,
 all areas will slide their images out.
 Article
 Demo
 
 
 
 
Merging Image Boxes
 
Today we will show you a nice effect for images with jQuery.
 The idea is to have a set of rotated thumbnails that,
 once clicked, animate to form the selected image.
 You can navigate through the images with previous
 and next buttons and when the big image gets clicked
 it will scatter into the little box shaped thumbnails again.
 Article
 Demo
 
 
 
 
Compact News Previewer
 
Today we will create a news previewer that let's you
 show your latest articles or news in a compact way.
 The news previewer will show some list of articles
 on the left side and the preview of the article with a
 longer description on the right. Once a news on the left
 is clicked, the preview will slide in.
 Article
 Demo
 
 
 
 
Overlay Effect Menu
 
In this tutorial we are going to create a simple menu
 that will stand out once we hover over it by covering
 everything except the menu with a dark overlay.
 The menu will stay white and a submenu area will
 expand. We will create this effect using jQuery.
 Article
 Demo
 
 
 
 
Polaroid Photobar Gallery
 
In this tutorial we are going to create an image gallery
 with a Polaroid look. We will have albums that will expand
 to sets of slightly rotated thumbnails that pop out on hover.
 The full image will slide in from the bottom once a thumbnail
 is clicked. In the full image view the user can navigate
 through the pictures or simply choose another thumbnail
 to be displayed.
 Article
 Demo
 
 
 
 
Pull Out Content Panel
 
In this tutorial we will create a content panel that 
 slides out at a predefined scroll position. It will 
 reveal a teaser with related content and it can be 
 expanded to full page size to show more. A custom 
 slider allows to scroll through many items in the 
 panel.
 Article
 Demo
 
 
 
 
Thumbnails Navigation Gallery
 
In this tutorial we are going to create an extraordinary
 gallery with scrollable thumbnails that slide out from a
 navigation. We are going to use jQuery and some CSS3
 properties for the style. The main idea is to have a
 menu of albums where each item will reveal a horizontal
 bar with thumbnails when clicked.
 Article
 Demo