jQuery笔记本翻页效果.zip_jquery_thoughteh5_效果

共37个文件

jpg：17个

png：9个

js：7个

版权申诉

jquery

127 浏览量 2022-09-21 01:13:28 上传评论收藏 435KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

jQuery笔记本翻页效果.zip （37个子文件）

jQuery笔记本翻页效果

css

style.css 4KB

images

8.jpg 12KB

left_bg.jpg 15KB

14.jpg 10KB

2.jpg 13KB

1.jpg 10KB

6.jpg 13KB

wood.jpg 46KB

ajax-loader.gif 3KB

3.jpg 12KB

5.jpg 7KB

bg.png 110KB

11.jpg 9KB

4.jpg 15KB

10.jpg 12KB

right_bg.jpg 18KB

13.jpg 11KB

12.jpg 10KB

9.jpg 10KB

circle.png 6KB

7.jpg 9KB

buttons.png 4KB

h1.png 1KB

cufon

Note_this_400.font.js 20KB

cufon-yui.js 18KB

ChunkFive_400.font.js 16KB

index.html 16KB

booklet

jquery-1.4.4.min.js 77KB

images

arrow-next.png 6KB

arrow-prev.png 6KB

shadow-top-forward.png 3KB

shadow.png 5KB

shadow-top-back.png 3KB

jquery.booklet.1.1.0.min.js 16KB

jquery.booklet.1.1.0.css 5KB

jquery.easing.1.3.js 5KB

jquery.booklet.1.1.0.js 31KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery笔记本翻页效果 - 站长素材</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script> <script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></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"/> <script src="cufon/cufon-yui.js" type="text/javascript"></script> <script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script> <script src="cufon/Note_this_400.font.js" type="text/javascript"></script> <script type="text/javascript"> 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'}); </script> </head> <body> <h1 class="title"></h1> <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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" class="article">Article</a> <a href="http://sc.chinaz.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://sc.chinaz.com/" target="_blank" cla