一款Jquery实现翻书特效

翻书效果功能代码如下:

  1. var $pageheight = 189;
  2. var $pagewidth = 146;
  3. var $pageYpos = 0;
  4. $(document).ready(function(){
  5.     //点击左边页面翻书事件
  6.     $(\"#leftpage\").click( function() {
  7.         $pageYpos = $pageYpos + $pageheight;
  8.         $(\"#leftpage\").css(\"background-position\", \"0px \"+$pageYpos+\"px\");    
  9.         $(\"#flip\").css(\"background-position\", \"top right\");    
  10.         setTimeout (\'$(\"#flip\").css(\"background-position\", \"top center\");\', 200);
  11.         setTimeout (\'$(\"#rightpage\").css(\"background-position\", \"146px \"+$pageYpos+\"px\");\', 200);        
  12.         
  13.     });             
  14.     
  15.     //点击右边页面翻书事件
  16.     $(\"#rightpage\").click( function() {
  17.         $pageYpos = $pageYpos - $pageheight;
  18.         $(\"#rightpage\").css(\"background-position\", \"0px \"+$pageYpos+\"px\");    
  19.         $(\"#flip\").css(\"background-position\", \"top left\");    
  20.         setTimeout (\'$(\"#flip\").css(\"background-position\", \"top center\");\', 200);
  21.         setTimeout (\'$(\"#leftpage\").css(\"background-position\", \"146px \"+$pageYpos+\"px\");\', 200);
  22.     });    
  23. });

所用图片如下: bb
bb
bb

 

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/30111374/viewspace-1665562/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/30111374/viewspace-1665562/

$(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; //alert(cnt_images); 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); }); });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值