jQuery 图片翻页展示效果 Awesome flipping page gallery

This plugin builds an image gallery made as a book.

You can flip the book pages to view the next or previous image clicking or dragging the animated corners shown when hovering on the gallery area.

The plugin needs jquery 1.2.3. Tested with all jquery compatible browsers.

IE needs a modified version of excanvas I wrote that supports patterns (with a special feature to scale patterns) and rotated linear gradient.

You need to add the following line to the head:

<!--[if IE]><script type="text/javascript" src="excanvasX.js"></script><![endif]-->

 

How to use the plugin

The plugin finds all the images inside the provided selector and build the flipping book gallery.

$(selector).jFlip(width,height,options)

 

Arguments

• width (number - default 300) : width of the canvas in px
• height (number - default 300) : height of the canvas in px
• options (hash) :
  • background (string - default "green") : background color when images are smaller than canvas ("red","#FFF","rgba(255,255,255)")
  • cornersTop (boolean - default true) : true for top corners, false for bottom ones
  • scale (string - default "noresize") :
    • "noresize" images are not resized
    • "fit" big images are resized to be completely visible
    • "fill" all images are resized keeping aspect ratio to fill the canvas
  • gradientColors (array of strings - default [’#4F2727’,’#FF8F8F’,’#F00’]) : the colors the corners (dark color, light color, plain color) since version 0.4
  • curlSize (number - default 0.1) : the size of the corner as a fraction of height/width (ex: 0.1 sets corner width = jflip width*0.1 and corner height = jflip height*0.1) since version 0.4

Events - since version 0.4

The elements on which jFlip is applied can bind the flip.jflip event, triggered on page flip

The event handler has the following signature:

function(event,current_page,total_pages)

转载于:https://www.cnblogs.com/zhaozzm/p/4482799.html