|
超酷的翻书效果jquery代码 <script type="text/javascript" src="http://code./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"/> </head> <body> <h1 style="text-align:center" class="title">超酷的翻书效果jquery代码</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>关于一流素材网站</h1> <p><a href="http://www." target="_blank">www.</a>一流素材网站提供原创、精心整理的各种做站图片素材、图标定位样式表、幻灯片/焦点图、PHP常用类、各种行业数据库包、网站(CMS/WP)模板,代码均经测试通过，并排版注释完好，附有完善的安装使用说明文档。某些文件还可技术支持。是您作为一个站长快速开发网站不可缺少的资源站，节省您的众多宝贵时间。加快您的工作效率，让做站赚钱更轻松。欢迎前来免费下载。</p> <a href="http://www." target="_blank" class="article">首页</a> <a href="http://www./" target="_blank" class="demo">下载本源码</a> </div> <div> <img src="images/2.jpg" alt="" /> <h1>一流ICONS</h1> <p>一流素材网推出的一个利用CSS定位快速应用</p> <p>一流图标是一流素材网站开发的一套网页常用小图标排版图和对应的CSS定位样式表。</p> <p>开发网站过程中，肯定会用到各种各样的小图标来进行UI好友性以及美化。但图标的整理和定位工作一直都是耗时又耗力的事情。</p> <p>现在不同了！有了一流图标，快速部署您的网站前台框架，只需简单的一行代码，图标便越于纸上。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> <div> <img src="images/3.jpg" alt="" /> <h1>web ui和工业设计png素材大全200款打包下载</h1> <p>本套PNG素材包包含了网页设计和工业设计中常用到的多达200款png素材下载。每款还包含多种颜色。无论从使用频率、做工、都很值得下载和收藏。 本套png素材包含计算器、便签、别针、相机、钟表、信用卡、货币、web图标、锁、地球、齿轮电话、方向标、U盘插口等等众多PNG图标。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> <div> <img src="images/4.jpg" alt="" /> <h1>3D电影走马灯风格图片轮播Flash/XML</h1> <p>一款好的焦点图会让整个网站焕然声色！3D电影走马灯风格的图片轮播，适合小图片的产品介绍焦点图等。Flash/xml调用。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> <div> <img src="images/5.jpg" alt="" /> <h1>ckeditor插件之插入代码和代码高亮插件完美版</h1> <p>此款ckeditor插入代码高亮插件支持PHPCMS，其实做这个本来就是针对PHPCMS的ckeditor编辑器来做的。本站用的即是这个插件。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> <div> <img src="images/6.jpg" alt="" /> <h1>商城960像素宽屏淡入淡出JS焦点广告图代码</h1> <p>这个JS焦点广告图淡入淡出效果，很大气。而且利于搜索引擎。这是JS焦点图的好处。适合商城、企业、门户等大气型的网站使用。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> <div> <img src="images/7.jpg" alt="" /> <h1>全世界国家SQL数据库及对应国旗PNG图标打包下载</h1> <p>本压缩包包含一个全世界国家SQL文件，和两个对应的国旗文件夹(GIF格式、PNG格式)。利用Phpmyadmin/Sql命令行等工具导入压缩包内的tm_countr...</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> <div> <img src="images/8.jpg" alt="" /> <h1>16, 24, 32,64像素web常用图标几十款</h1> <p>包含EPS和PNG两个格式，并且这两种格式各包含16, 24, 32,64像素的图标，这些图标都是网站经常用的.</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">预览</a> </div> </div> </div> </div> <div><div style="height:90px; width:728px; padding-top:10px; margin:0px auto;"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-6110696270771103"; /* 全站大横幅 */ google_ad_slot = "4968847295"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2./pagead/show_ads.js"> </script> </div> <span class="reference"> <p style="text-align:center; color:#fff;">代码整理：<a href="http://www./" target="_blank">一流素材网</a></p> <p style="text-align:center; color:#fff;">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> </span> </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> |
|
|
