|
超酷的翻書(shū)效果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">超酷的翻書(shū)效果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>關(guān)于一流素材網(wǎng)站</h1> <p><a href="http://www." target="_blank">www.</a>一流素材網(wǎng)站提供原創(chuàng)、精心整理的各種做站圖片素材、圖標(biāo)定位樣式表、幻燈片/焦點(diǎn)圖、PHP常用類(lèi)、各種行業(yè)數(shù)據(jù)庫(kù)包、網(wǎng)站(CMS/WP)模板,代碼均經(jīng)測(cè)試通過(guò)，并排版注釋完好，附有完善的安裝使用說(shuō)明文檔。某些文件還可技術(shù)支持。是您作為一個(gè)站長(zhǎng)快速開(kāi)發(fā)網(wǎng)站不可缺少的資源站，節(jié)省您的眾多寶貴時(shí)間。加快您的工作效率，讓做站賺錢(qián)更輕松。歡迎前來(lái)免費(fèi)下載。</p> <a href="http://www." target="_blank" class="article">首頁(yè)</a> <a href="http://www./" target="_blank" class="demo">下載本源碼</a> </div> <div> <img src="images/2.jpg" alt="" /> <h1>一流ICONS</h1> <p>一流素材網(wǎng)推出的一個(gè)利用CSS定位快速應(yīng)用</p> <p>一流圖標(biāo)是一流素材網(wǎng)站開(kāi)發(fā)的一套網(wǎng)頁(yè)常用小圖標(biāo)排版圖和對(duì)應(yīng)的CSS定位樣式表。</p> <p>開(kāi)發(fā)網(wǎng)站過(guò)程中，肯定會(huì)用到各種各樣的小圖標(biāo)來(lái)進(jìn)行UI好友性以及美化。但圖標(biāo)的整理和定位工作一直都是耗時(shí)又耗力的事情。</p> <p>現(xiàn)在不同了！有了一流圖標(biāo)，快速部署您的網(wǎng)站前臺(tái)框架，只需簡(jiǎn)單的一行代碼，圖標(biāo)便越于紙上。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</a> </div> <div> <img src="images/3.jpg" alt="" /> <h1>web ui和工業(yè)設(shè)計(jì)png素材大全200款打包下載</h1> <p>本套PNG素材包包含了網(wǎng)頁(yè)設(shè)計(jì)和工業(yè)設(shè)計(jì)中常用到的多達(dá)200款png素材下載。每款還包含多種顏色。無(wú)論從使用頻率、做工、都很值得下載和收藏。 本套png素材包含計(jì)算器、便簽、別針、相機(jī)、鐘表、信用卡、貨幣、web圖標(biāo)、鎖、地球、齒輪電話、方向標(biāo)、U盤(pán)插口等等眾多PNG圖標(biāo)。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</a> </div> <div> <img src="images/4.jpg" alt="" /> <h1>3D電影走馬燈風(fēng)格圖片輪播Flash/XML</h1> <p>一款好的焦點(diǎn)圖會(huì)讓整個(gè)網(wǎng)站煥然聲色！3D電影走馬燈風(fēng)格的圖片輪播，適合小圖片的產(chǎn)品介紹焦點(diǎn)圖等。Flash/xml調(diào)用。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</a> </div> <div> <img src="images/5.jpg" alt="" /> <h1>ckeditor插件之插入代碼和代碼高亮插件完美版</h1> <p>此款ckeditor插入代碼高亮插件支持PHPCMS，其實(shí)做這個(gè)本來(lái)就是針對(duì)PHPCMS的ckeditor編輯器來(lái)做的。本站用的即是這個(gè)插件。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</a> </div> <div> <img src="images/6.jpg" alt="" /> <h1>商城960像素寬屏淡入淡出JS焦點(diǎn)廣告圖代碼</h1> <p>這個(gè)JS焦點(diǎn)廣告圖淡入淡出效果，很大氣。而且利于搜索引擎。這是JS焦點(diǎn)圖的好處。適合商城、企業(yè)、門(mén)戶(hù)等大氣型的網(wǎng)站使用。</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</a> </div> <div> <img src="images/7.jpg" alt="" /> <h1>全世界國(guó)家SQL數(shù)據(jù)庫(kù)及對(duì)應(yīng)國(guó)旗PNG圖標(biāo)打包下載</h1> <p>本壓縮包包含一個(gè)全世界國(guó)家SQL文件，和兩個(gè)對(duì)應(yīng)的國(guó)旗文件夾(GIF格式、PNG格式)。利用Phpmyadmin/Sql命令行等工具導(dǎo)入壓縮包內(nèi)的tm_countr...</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</a> </div> <div> <img src="images/8.jpg" alt="" /> <h1>16, 24, 32,64像素web常用圖標(biāo)幾十款</h1> <p>包含EPS和PNG兩個(gè)格式，并且這兩種格式各包含16, 24, 32,64像素的圖標(biāo)，這些圖標(biāo)都是網(wǎng)站經(jīng)常用的.</p> <a href="http://www./" target="_blank" class="article">查看</a> <a href="http://www./" target="_blank" class="demo">預(yù)覽</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">一流素材網(wǎng)</a></p> <p style="text-align:center; color:#fff;">＊尊重他人勞動(dòng)成果，轉(zhuǎn)載請(qǐng)自覺(jué)注明出處！注：此代碼僅供學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。</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> |
|
|
