您當前位置：首頁 > web前端 > jquery > jQuery翻書插件JMagazine全新瀏覽體驗

jQuery翻書插件JMagazine全新瀏覽體驗

來源：程序員人生發布時間：2014-02-27 19:31:15 閱讀次數：3008次

提供全新的瀏覽體驗，單獨的每一頁都能夠添加HTML代碼

這是我做的一個小小的試例，用了 jquery ui，以及前面制作的JTooltips

操作：

1.左鍵翻頁

2.右鍵放大,放大的圖片可以用鼠標拖動和滑輪滾動，在放大圖片的時候右鍵點擊關閉(因為有了多個鼠標右鍵的操作說以我吧右鍵的菜單給屏蔽了)

3.自動翻頁自動記錄上一操作為前翻或者后翻，并保持狀態

4.url中有page這個值，這個值設定雜志的初始頁面，發送鏈接時候記錄

如果出現錯誤，請先刷新一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>EasyShow - Liehuo.net</title><script src="http://www.vxbq.cn/uploads/common/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script><link rel="stylesheet" href="http://www.vxbq.cn/uploads/allimg/1002/liehuo100107.css" type="text/css" title="main" /><script src="http://www.vxbq.cn/uploads/Common/js/ui.core.js" language="javascript" type="text/javascript"></script><script src="http://www.vxbq.cn/uploads/Common/js/ui.draggable.js" language="javascript" type="text/javascript"></script><script src="http://www.vxbq.cn/uploads/Common/js/jquery.mousewheel.js" language="javascript" type="text/javascript"></script><script src="http://www.vxbq.cn/uploads/Common/js/JTooltips.js" language="javascript" type="text/javascript"></script><script src="http://www.vxbq.cn/uploads/Common/js/JMagazine.js" language="javascript" type="text/javascript"></script><script language="javascript" type="text/javascript">window.moveTo(0,0);window.resizeTo(screen.availWidth,screen.availHeight);function openWindows(url) {bschitchat=window.open(url,'bschitchat','fullscreen=no,toolbar=no,Status=no,scrollbars=yes,resizable=yes');return;}</script></head><body><div class="wrapper"><div class="MainBook clearfix mar"><div class="CenterBook"><div class="MagMain"><div id="LeftMag"><span></span></div><div id="RightMag"><span></span></div><div id="ViewMag"><div class="viewContanier" style='z-index:21;width:100%;height:200%;top:0px;left:0px;'><img class="viewBigIMG" /></div></div></div></div><div class="ContralBook"><a id="L_bttn"><img alt="點擊左翻" src="http://www.vxbq.cn/uploads/allimg/1002/Developpers_Icons_066.png" /></a><a id="R_bttn"><img alt="點擊右翻" src="http://www.vxbq.cn/uploads/allimg/1002/Developpers_Icons_065.png" /></a><a id="Auto_bttn"><img alt="點擊自動翻頁" src="http://www.vxbq.cn/uploads/allimg/1002/Developpers_Icons_067.png" /></a><a id="StopAuto_bttn"><img alt="停止自動翻頁" src="http://www.vxbq.cn/uploads/allimg/1002/Developpers_Icons_059.png" /></a><a id="Copy_bttn"><img alt="復制鏈接給你朋友" src="http://www.vxbq.cn/uploads/allimg/1002/Developpers_Icons_101.png" /></a></div></div><script language="javascript" type="text/javascript">var json ={"MagIfo":{"MagName":"JMagazine插件Demo","PageCount":"10"},"MagPage":[{"Title":"JMagazine第一頁…加載推薦測試","Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m1.jpg","PageHtml":""},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m2.jpg"},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m3.jpg","PageHtml":"<a style='top:1px;left:1px;' href='#'>點擊可以翻頁哦！</a>"},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m4.jpg","PageHtml":"<div style='top:50px;left:50px;width:100px;height:100px;overfllow:hidden;background:#f00;color:#FFF;'>右擊圖片放大，再右擊還原！</div>"},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m5.jpg"},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m6.jpg"},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m7.jpg"},{"Title":"JMagazine第八頁…加載推薦測試","Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m8.jpg"},{"Page":"http://www.vxbq.cn/uploads/Common/images/liehuo_net_m9.jpg"},{"Page":"http://www.vxbq.cn/uploads/allimg/1002/liehuo_net_m0.jpg"}]}//全局設置變量function Request(name) //獲取當前頁面參數{new RegExp("(^|&)"+name+"=([^&]*)").exec(window.location.search.substr(1));return RegExp.$2}var AnimateStyle; // NULL為標準動畫如果為1為無動畫版var AnimateSpeed; // NULL為默認運動速度var Volume; // NULL為默認音量var MagJson; // 雜志信息$(function(){document.oncontextmenu=new Function("event.returnValue=false;"); //禁止右鍵功能,單擊右鍵將無反應MagJson = json;document.title=json.MagIfo.MagName; //修改該頁的titlevar MagPage= json.MagPage;var starPage;if(Request("page")) //有Page參數分配當前頁數{var reqPage = Request("page");if(isEven(reqPage ))starPage=reqPage-2; //偶數Page定義出現在右邊elsestarPage=reqPage-1; //奇數Page定義出現在左邊}elsestarPage=0; //定義第當然頁數默認為第一頁$(".MainBook").JMag({MagJson:MagJson,MagMain:$("#MagMain"),LeftPage:$("#LeftMag"),RightPage:$("#RightMag"),ViewPage:$("#ViewMag"),PageHeight:450,PageWidth:360,StarPageNum:starPage,DefaultPageSpeed:200,BeforeLoad:function(e){$.fn.JTooltips({isCenter:true,content:'<img src="http://www.vxbq.cn/uploads/allimg/1002/34-0.gif" alt="" /><p>正在加載中</p>',newClass:'perGirl',initWidth:120,showTime:1000});},AfterLoad:function(e){$.fn.JTooltipsRmove();},PageCount:json.MagIfo.PageCount,PageError:function(e){$.fn.JTooltips({isCenter:true,content:'<p>'+e.errMessage+'</p>',newClass:'perGirl',initWidth:120,showTime:1000});}});$("#Copy_bttn").click(function(){window.clipboardData.setData("text",$(".MainBook").data("MagTitle")+""+window.location+"?page="+$(".MainBook").getPageNum())alert("已經成功復制到你剪切板中");})$("#R_bttn").add("#RightMag").click(function(){$(".MainBook").PageGo();})$("#L_bttn").add("#LeftMag").click(function(){$(".MainBook").PageBack();})$("#StopAuto_bttn").click(function(){$(".MainBook").StopAuto();alert("關閉自動翻頁")})$("#Auto_bttn").click(function(){$.fn.JTooltips({buttonText:["確定","取消"],buttonEvent:['確定',function(e) {alert("自動開啟，4秒")$(".MainBook").AutoPlay(4000);$.fn.JTooltipsRmove();},"取消",function(e){$.fn.JTooltipsRmove();}],newClass:'Myspace',isCenter:true,initWidth:300,content:"確定開啟自動翻頁嗎？",postion:[parseInt($(".CenterBook").width())/2+$(".CenterBook").offset().left,parseInt($(".MagMain").height())/2+$(".MagMain").offset().top]});})$("#LeftMag").bind("mousedown",function(e){if(e.which == "3"){$(".MainBook").StopAuto();$(".MainBook").Zoom(0,2);}});$("#RightMag").bind("mousedown",function(e){if(e.which == "3"){$(".MainBook").StopAuto();$(".MainBook").Zoom(1,2);}});$("#ViewMag").bind("mousedown",function(e){if(e.which == "3")$(".MainBook").StopZoom();});$(".viewContanier").draggable({axis:'y',containment:[0,-512,0,0]});$("#ViewMag").mousewheel(function(objEvent, intDelta){var bigpic =$("#ViewMag .viewContanier");if(parseInt(bigpic.css('top'),10)+intDelta*120/3 >-530){if(parseInt(bigpic.css('top'),10)+intDelta*120/5 < 0){if(parseInt(bigpic.css('top'),10)+intDelta*120/5 > -intDelta*120/5){bigpic.css({'top':0})}else{bigpic.css({'top': parseInt(bigpic.css('top'),10)+intDelta*120/5});}}else{bigpic.css({'top':0})}}else{bigpic.css({'top':-530})}});});function isEven(num) //檢查奇偶數 (偶數 True 奇數 False){if(num%2==0)return true;elsereturn false;}</script></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：運行后刷新才能顯示效果!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 CSS3創建多重邊框

下一篇 網站出現多個快照是百度原因還是網站的原因?

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

jQuery翻書插件JMagazine全新瀏覽體驗