Home > Web Front-end > JS Tutorial > jquery electronic magazine code sharing with page turning animation_jquery

jquery electronic magazine code sharing with page turning animation_jquery

WBOY
Release: 2016-05-16 15:43:46
Original
2261 people have browsed it

This is an electronic magazine with page turning animation based on jquery. The editor sometimes wonders if all the paper textbooks we read can be changed to e-books. Wouldn't this save more resources?

I remember that we have introduced a lot of book page turning animations before. For example, this CSS3 book page turning animation is very lifelike. The jQuery book page turning 3D animation I want to share today is more powerful, can support the turning of any number of pages, and also has very beautiful visual effects. The content of the book supports any HTML element, which is quite flexible.

Operating renderings                                                                                                                                                                                                                                                        since Source code----------------------------------------

The jquery electronic magazine code with page turning animation shared with you is as follows

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

<head>

    <title>jQuery书本翻页动画效果DEMO演示</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>

 

  

<div style="text-align:center;clear:both">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

 <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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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="#" class="article">Article</a>

   <a href="#" 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 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.</p>

   <a href="#" class="article">Article</a>

   <a href="#" class="demo">Demo</a>

   </div>

   <div>

   <img src="images/13.jpg" alt="" />

   <h1>Pull Out Content Panel</h1>

   <p>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.</p>

   <a href="#" class="article">Article</a>

   <a href="#" class="demo">Demo</a>

   </div>

   <div>

   <img src="images/14.jpg" alt="" />

   <h1>Thumbnails Navigation Gallery</h1>

   <p>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.</p>

   <a href="#" class="article">Article</a>

   <a href="#" class="demo">Demo</a>

   </div>

  </div>

  </div>

 </div>

 

    <!-- The JavaScript -->

 

    <script type="text/javascript">

  $(function() {

  var $mybook  = $('#mybook');

  var $bttn_next = $('#next_page_button');

  var $bttn_prev = $('#prev_page_button');

  var $loading = $('#loading');

  var $mybook_images = $mybook.find('img');

  var cnt_images = $mybook_images.length;

  var loaded  = 0;

  //preload all the images in the book,

  //and then call the booklet plugin

 

  $mybook_images.each(function(){

   var $img = $(this);

   var source = $img.attr('src');

   $('<img/>').load(function(){

   ++loaded;

   if(loaded == cnt_images){

    $loading.hide();

    $bttn_next.show();

    $bttn_prev.show();

    $mybook.show().booklet({

    name:        null,              // name of the booklet to display in the document title bar

    width:       800,               // container width

    height:       500,               // container height

    speed:       600,               // speed of the transition between pages

    direction:     'LTR',              // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left

    startingPage:    0,                // index of the first page to be displayed

    easing:       'easeInOutQuad',         // easing method for complete transition

    easeIn:       'easeInQuad',          // easing method for first half of transition

    easeOut:      'easeOutQuad',          // easing method for second half of transition

 

    closed:       true,              // start with the book "closed", will add empty pages to beginning and end of book

    closedFrontTitle:  null,              // used with "closed", "menu" and "pageSelector", determines title of blank starting page

    closedFrontChapter: null,              // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page

    closedBackTitle:  null,              // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page

    closedBackChapter: null,              // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page

    covers:       false,              // used with "closed", makes first and last pages into covers, without page numbers (if enabled)

 

    pagePadding:    10,               // padding for each page wrapper

    pageNumbers:    true,              // display page numbers on each page

 

    hovers:       false,              // enables preview pageturn hover animation, shows a small preview of previous or next page on hover

    overlays:      false,              // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable

    tabs:        false,              // adds tabs along the top of the pages

    tabWidth:      60,               // set the width of the tabs

    tabHeight:     20,               // set the height of the tabs

    arrows:       false,              // adds arrows overlayed over the book edges

    cursor:       'pointer',            // cursor css setting for side bar areas

 

    hash:        false,              // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled

    keyboard:      true,              // enables navigation with arrow keys (left: previous, right: next)

    next:        $bttn_next,       // selector for element to use as click trigger for next page

    prev:        $bttn_prev,       // selector for element to use as click trigger for previous page

 

    menu:        null,              // selector for element to use as the menu area, required for 'pageSelector'

    pageSelector:    false,              // enables navigation with a dropdown menu of pages, requires 'menu'

    chapterSelector:  false,              // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'

 

    shadows:      true,              // display shadows on page animations

    shadowTopFwdWidth: 166,               // shadow width for top forward anim

    shadowTopBackWidth: 166,               // shadow width for top back anim

    shadowBtmWidth:   50,               // shadow width for bottom shadow

 

    before:       function(){},          // callback invoked before each page turn animation

    after:       function(){}           // callback invoked after each page turn animation

    });

    Cufon.refresh();

   }

   }).attr('src',source);

  });

   

  });

    </script>

  

  </body>

</html>

Copy after login
I hope this article will be helpful to everyone’s jQuery programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template