您當(dāng)前位置：首頁(yè) > web前端 > jquery > jQuery翻書插件JMagazine全新瀏覽體驗(yàn)

jQuery翻書插件JMagazine全新瀏覽體驗(yàn)

來(lái)源：程序員人生發(fā)布時(shí)間：2014-02-27 19:31:15 閱讀次數(shù)：3015次

提供全新的瀏覽體驗(yàn)，單獨(dú)的每一頁(yè)都能夠添加HTML代碼

這是我做的一個(gè)小小的試?yán)?，用?jquery ui，以及前面制作的JTooltips

操作：

1.左鍵翻頁(yè)

2.右鍵放大,放大的圖片可以用鼠標(biāo)拖動(dòng)和滑輪滾動(dòng)，在放大圖片的時(shí)候右鍵點(diǎn)擊關(guān)閉(因?yàn)橛辛硕鄠€(gè)鼠標(biāo)右鍵的操作說(shuō)以我吧右鍵的菜單給屏蔽了)

3.自動(dòng)翻頁(yè)自動(dòng)記錄上一操作為前翻或者后翻，并保持狀態(tài)

4.url中有page這個(gè)值，這個(gè)值設(shè)定雜志的初始頁(yè)面，發(fā)送鏈接時(shí)候記錄

如果出現(xiàn)錯(cuò)誤，請(qǐng)先刷新一下。

<!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.jyygyx.com/uploads/common/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script><link rel="stylesheet" href="http://www.jyygyx.com/uploads/allimg/1002/liehuo100107.css" type="text/css" title="main" /><script src="http://www.jyygyx.com/uploads/Common/js/ui.core.js" language="javascript" type="text/javascript"></script><script src="http://www.jyygyx.com/uploads/Common/js/ui.draggable.js" language="javascript" type="text/javascript"></script><script src="http://www.jyygyx.com/uploads/Common/js/jquery.mousewheel.js" language="javascript" type="text/javascript"></script><script src="http://www.jyygyx.com/uploads/Common/js/JTooltips.js" language="javascript" type="text/javascript"></script><script src="http://www.jyygyx.com/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="點(diǎn)擊左翻" src="http://www.jyygyx.com/uploads/allimg/1002/Developpers_Icons_066.png" /></a><a id="R_bttn"><img alt="點(diǎn)擊右翻" src="http://www.jyygyx.com/uploads/allimg/1002/Developpers_Icons_065.png" /></a><a id="Auto_bttn"><img alt="點(diǎn)擊自動(dòng)翻頁(yè)" src="http://www.jyygyx.com/uploads/allimg/1002/Developpers_Icons_067.png" /></a><a id="StopAuto_bttn"><img alt="停止自動(dòng)翻頁(yè)" src="http://www.jyygyx.com/uploads/allimg/1002/Developpers_Icons_059.png" /></a><a id="Copy_bttn"><img alt="復(fù)制鏈接給你朋友" src="http://www.jyygyx.com/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第一頁(yè)…加載推薦測(cè)試","Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m1.jpg","PageHtml":""},{"Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m2.jpg"},{"Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m3.jpg","PageHtml":"<a style='top:1px;left:1px;' href='#'>點(diǎn)擊可以翻頁(yè)哦！</a>"},{"Page":"http://www.jyygyx.com/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.jyygyx.com/uploads/Common/images/liehuo_net_m5.jpg"},{"Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m6.jpg"},{"Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m7.jpg"},{"Title":"JMagazine第八頁(yè)…加載推薦測(cè)試","Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m8.jpg"},{"Page":"http://www.jyygyx.com/uploads/Common/images/liehuo_net_m9.jpg"},{"Page":"http://www.jyygyx.com/uploads/allimg/1002/liehuo_net_m0.jpg"}]}//全局設(shè)置變量function Request(name) //獲取當(dāng)前頁(yè)面參數(shù){new RegExp("(^|&)"+name+"=([^&]*)").exec(window.location.search.substr(1));return RegExp.$2}var AnimateStyle; // NULL為標(biāo)準(zhǔn)動(dòng)畫如果為1為無(wú)動(dòng)畫版var AnimateSpeed; // NULL為默認(rèn)運(yùn)動(dòng)速度var Volume; // NULL為默認(rèn)音量var MagJson; // 雜志信息$(function(){document.oncontextmenu=new Function("event.returnValue=false;"); //禁止右鍵功能,單擊右鍵將無(wú)反應(yīng)MagJson = json;document.title=json.MagIfo.MagName; //修改該頁(yè)的titlevar MagPage= json.MagPage;var starPage;if(Request("page")) //有Page參數(shù)分配當(dāng)前頁(yè)數(shù){var reqPage = Request("page");if(isEven(reqPage ))starPage=reqPage-2; //偶數(shù)Page定義出現(xiàn)在右邊elsestarPage=reqPage-1; //奇數(shù)Page定義出現(xiàn)在左邊}elsestarPage=0; //定義第當(dāng)然頁(yè)數(shù)默認(rèn)為第一頁(yè)$(".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.jyygyx.com/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("已經(jīng)成功復(fù)制到你剪切板中");})$("#R_bttn").add("#RightMag").click(function(){$(".MainBook").PageGo();})$("#L_bttn").add("#LeftMag").click(function(){$(".MainBook").PageBack();})$("#StopAuto_bttn").click(function(){$(".MainBook").StopAuto();alert("關(guān)閉自動(dòng)翻頁(yè)")})$("#Auto_bttn").click(function(){$.fn.JTooltips({buttonText:["確定","取消"],buttonEvent:['確定',function(e) {alert("自動(dòng)開啟，4秒")$(".MainBook").AutoPlay(4000);$.fn.JTooltipsRmove();},"取消",function(e){$.fn.JTooltipsRmove();}],newClass:'Myspace',isCenter:true,initWidth:300,content:"確定開啟自動(dòng)翻頁(yè)嗎？",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) //檢查奇偶數(shù) (偶數(shù) True 奇數(shù) False){if(num%2==0)return true;elsereturn false;}</script></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：運(yùn)行后刷新才能顯示效果!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

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

上一篇 CSS3創(chuàng)建多重邊框

下一篇 網(wǎng)站出現(xiàn)多個(gè)快照是百度原因還是網(wǎng)站的原因?

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

jQuery翻書插件JMagazine全新瀏覽體驗(yàn)