<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带翻页动画的电子杂志特效代码 - down.admin5.com</title>
<script type="text/javascript" src="booklet/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="booklet/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="booklet/jquery.booklet.1.1.0.min.js"></script>
<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Loading pages...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<img src="images/1.jpg" alt=""/>
<h1>Slider Gallery</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/2.jpg" alt="" />
<h1>Animated Portfolio Gallery</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/3.jpg" alt="" />
<h1>Annotation Overlay Effect</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/4.jpg" alt="" />
<h1>Bubbleriffic Image Gallery</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/5.jpg" alt="" />
<h1>Collapsing Site Navigation</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/6.jpg" alt="" />
<h1>Custom Animation Banner</h1>
<p>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.</p>
<p>We will be using the jQuery Easing Plugin and the jQuery 2D
Transform Plugin to create some nifty animations.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/7.jpg" alt="" />
<h1>Full Page Image Gallery</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/8.jpg" alt="" />
<h1>Hover Slide Effect</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/9.jpg" alt="" />
<h1>Merging Image Boxes</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/10.jpg" alt="" />
<h1>Compact News Previewer</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/11.jpg" alt="" />
<h1>Overlay Effect Menu</h1>
<p>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.</p>
<a href="http://down.admin5.com/" target="_blank" class="article">Article</a>
<a href="http://down.admin5.com/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="images/12.jpg" alt="" />
<h1>Polaroid Photobar Gallery</h1>
<p>In this tutorial we are going to create an image gallery
with a Polaroid lo
jiaoben2015082705.zip （36个子文件） 
871 css 
style.css 3KB
face.jpg 81KB booklet jquery.booklet.1.1.0.css 5KB jquery.booklet.1.1.0.js 31KB jquery.booklet.1.1.0.min.js 16KB jquery-1.4.4.min.js 77KB images 
shadow-top-back.png 3KB shadow-top-forward.png 3KB arrow-prev.png 6KB shadow.png 5KB arrow-next.png 6KB jquery.easing.1.3.js 5KB images 5.jpg 7KB bg.png 110KB 3.jpg 12KB h1.png 1KB 8.jpg 12KB 4.jpg 15KB 12.jpg 10KB 9.jpg 10KB 2.jpg 13KB 10.jpg 12KB right_bg.jpg 18KB 1.jpg 10KB circle.png 6KB
ajax-loader.gif 3KB 11.jpg 9KB 14.jpg 10KB 6.jpg 13KB wood.jpg 46KB left_bg.jpg 15KB buttons.png 4KB 7.jpg 9KB 13.jpg 11KB
index.html 15KB 说明.htm 4KB资源评论
