超炫電子雜志JQuery插件JMagazine

　　JMagazine是一個(gè)做什么的東西?

　　現(xiàn)在網(wǎng)絡(luò)運(yùn)用越來也豐富，電子雜志是一個(gè)很有趣的東西，不過大家看的大部分。基本都是flash的，有不易修改和加載過慢的缺點(diǎn)，JMagazine是一個(gè)在JQ下能幫你完成一個(gè)圖片電子雜志的插件。

　　Current version: beta 0.1.3

　　Compressed filesize: 12,288 bytes

　　Author: Ariesjia

　　這是我做的一個(gè)小小的試?yán)昧?jquery ui，以及前面制作的JTooltips ，在博客園上我只是把雜志的大小改的小了一點(diǎn)，demo隨后附上

　　操作：1.左鍵翻頁

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

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

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

<script src="http://files.cnblogs.com/ariesjia/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script><script src="http://files.cnblogs.com/ariesjia/ui.core.js" language="javascript" type="text/javascript"></script><script src="http://files.cnblogs.com/ariesjia/ui.draggable.js" language="javascript" type="text/javascript"></script><script src="http://files.cnblogs.com/ariesjia/JMagazine.js" language="javascript" type="text/javascript"></script><script src="http://files.cnblogs.com/ariesjia/JTooltips.js" language="javascript" type="text/javascript"></script><style>.CenterBook{background:#eeeeee;width:460px;margin-left:10px;height:310px;opacity:0.62;filter:alpha(opacity=62);}.MagMain{height:280px;display:block;position:relative; margin:0 auto;width:420px; }.ContralBook{background:#777;height:40px;display:block;position:relative;text-align:center;line-height:40px;padding-left:5px;overflow:hidden;}#ViewMag{width:500px;height:312.5px;z-index:99999999;position:absolute;overflow:hidden;display:none;border:4px black solid;cursor:move;}#ViewMag img{width:500px;height:625px;cursor:move;clear:both;position:absolute;top:0px;left:0px;}#LeftMag,#RightMag{margin-top:15px;position:relative;width:210px;float:left;height:252px;overflow:hidden;}#LeftMag {background:url('http://images.cnblogs.com/cnblogs_com/ariesjia/leftBook.png') no-repeat;}#RightMag{background:url('http://images.cnblogs.com/cnblogs_com/ariesjia/rightBook.png') right top no-repeat;}#LeftMag img,#RightMag img{width:200px; height:250px;position:absolute;top:0px;border-top:1px #999999 solid; border-bottom:1px #999999 solid;}#LeftMag img{right:0px;position:absolute;}#LeftMag span,#RightMag span{position:absolute;width:15px;height:250px;overflow:hidden; z-index:99;}#LeftMag span{right:0px;background:url('http://images.cnblogs.com/cnblogs_com/ariesjia/left.gif') no-repeat;filter: Alpha(Opacity=0,finishOpacity=50,style=1,startY=0,startX=0,finishY=0,finishX=60);}#RightMag span{left:0px;background:url('http://images.cnblogs.com/cnblogs_com/ariesjia/right.gif') no-repeat;filter: Alpha(Opacity=90,finishOpacity=0,style=1,startY=0,startX=0,finishY=0,finishX=60);}.perGirl{z-index:9999;filter: Alpha(Opacity=90,Opacity=100,finishOpacity=90,style=2,startY=0,startX=0,finishY=0,finishX=60);overflow:hidden;display:block;clear: both;background:#FEC7FB;color:#777;line-height:28px;border:1px gray solid;padding:10px;font-weight:bold;}.perGirl img{height:28px;width:28px;float:left;margin-right:5px;}.perGirl p{float:left;height:28px;line-height:28px;}</style><script language="javascript" type="text/javascript"> //全局設(shè)置 變量var AnimateStyle; // NULL為標(biāo)準(zhǔn)動(dòng)畫 如果為1為無動(dòng)畫版var AnimateSpeed; // NULL為默認(rèn)運(yùn)動(dòng)速度 var Volume; // NULL為默認(rèn)音量var MagJson; // 雜志信息var ViewTop;$(function(){document.oncontextmenu=new Function("event.returnValue=false;"); //禁止右鍵功能,單擊右鍵將無反應(yīng)document.onselectstart=new Function("event.returnValue=false;"); //禁止選擇,無法復(fù)制var json={"MagIfo":{"MagName":"JMagazine插件Demo","PageCount":"10"},"MagPage":[ {"Title":"JMagazine第一頁…加載推薦測試","Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine01.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine02.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine03.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine04.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine05.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine06.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine07.jpg"}, {"Title":"JMagazine第八頁…加載推薦測試","Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine08.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine09.jpg"}, {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine10.jpg"} ]} MagJson = json; //緩存臨時(shí)數(shù)據(jù) (同時(shí)考慮存在cookie中) var MagPage= json.MagPage; var starPage; if(Request("page")) //有Page參數(shù)分配當(dāng)前頁數(shù) { var reqPage = Request("page"); if(isEven(reqPage )) starPage=reqPage-2; //偶數(shù)Page定義出現(xiàn)在右邊 else starPage=reqPage-1; //奇數(shù)Page定義出現(xiàn)在左邊 } else starPage=0; //定義第當(dāng)然頁數(shù)默認(rèn)為第一頁 $(".MagMain").JMag({ MagJson:MagJson, MagMain:$("#MagMain"), LeftPage:$("#LeftMag"), RightPage:$("#RightMag"), ViewPage:$("#ViewMag"), StarPageNum:starPage, PageWidth:200, PageHeight:250, BeforeLoad:function(e){ $.fn.JTooltips({ isCenter:true, postion:[$(".MagMain").offset().left+parseInt($(".MagMain").css("width"))/2,$(".MagMain").offset().top+parseInt($(".MagMain").css("height"))/2], content:'<img src="/uploadfile/webqd/1F0351001-0.gif" alt="" /><p>正在加載中</p>', newClass:'perGirl' }); }, AfterLoad:function(e){ $.fn.JTooltipsRmove(); }, PageCount:json.MagIfo.PageCount, PageFirst:function(e){alert("翻到第一頁,測試PageFirst"+"這是由PageFirst調(diào)用的函數(shù),和PageError相比優(yōu)先級更高")}, PageLast:function(e){alert("翻到最后一頁,測試PageLast"+"這是由PageFirst調(diào)用的函數(shù)")}, PageError:function(e){alert(e.errMessage+"這是由PageError接口統(tǒng)一調(diào)用的自定義錯(cuò)誤接口，與PageFirst和PageLast沒有沖突,PageLast與PageFirst優(yōu)先級更高");} }); $("#Copy_bttn").click(function(){ window.clipboardData.setData("text",$(".MagMain").data("MagTitle")+""+window.location+"?page="+$(".MagMain").getPageNum()) alert("已經(jīng)成功復(fù)制到你剪切板中"); }) $("#R_bttn").add("#RightMag").click(function(){ $(".MagMain").data("style","PageGo").PageGo(); }) $("#L_bttn").add("#LeftMag").click(function(){ $(".MagMain").data("style","PageBack").PageGo(); }) $("#StopAuto_bttn").click(function(){ $(".MagMain").StopAuto(); }) $("#Auto_bttn").click(function(){ $(".MagMain").AutoPlay(4000); }) $("#LeftMag").bind("mousedown",function(e){ if(e.which == "3") { $('#ViewMag').css({'left':$(".MagMain").offset().left-(parseInt($("#ViewMag").css('width'))-parseInt($(".MagMain").css('width')))/2,'top':parseInt($(".MagMain").offset().top)-(parseInt($("#ViewMag").css('height'))-parseInt($(".MagMain").css('height')))/2}); $(".MagMain").StopAuto(); $(".MagMain").Zoom(0,2); } }); $("#RightMag").bind("mousedown",function(e){ if(e.which == "3") { $('#ViewMag').css({'left':$(".MagMain").offset().left-(parseInt($("#ViewMag").css('width'))-parseInt($(".MagMain").css('width')))/2,'top':parseInt($(".MagMain").offset().top)-(parseInt($("#ViewMag").css('height'))-parseInt($(".MagMain").css('height')))/2}); $(".MagMain").StopAuto(); $(".MagMain").Zoom(1,2); } }); $("#Fir_bttn").bind("click",function(e){ $(".MagMain").jumpTo(0); }); $("#Las_bttn").bind("click",function(e){ $(".MagMain").jumpTo($(".MagMain").getTotalNum()-1); }); $("#Help_bttn").bind("click",function(e){ alert($(".MagMain").getMagConfig().MagPage[0].PageHtml) }); ViewTop =parseInt($(".MagMain").offset().top)-(parseInt($("#ViewMag").css('height'))-parseInt($(".MagMain").css('height')))/2; $("#ViewMag img").draggable({containment:[0,103.5,0,ViewTop],axis:'y'}); $("#ViewMag").bind("mousedown",function(e){ if(e.which == "3") $(this).hide(); }); });function bbimg(o){ var bigpic =$("#ViewMag img") if(parseInt(bigpic.css('top'),10)+event.wheelDelta/3 >-312.5) { if(parseInt(bigpic.css('top'),10)+event.wheelDelta/5 < 0) { if(parseInt(bigpic.css('top'),10)+event.wheelDelta/5 > -event.wheelDelta/5) { bigpic.css({'top':0}) } else { bigpic.css({'top': parseInt(bigpic.css('top'),10)+event.wheelDelta/5}); } } else { bigpic.css({'top':0}) } } else { bigpic.css({'top':-312.5}) } return false;}function Request(name) //獲取當(dāng)前頁面參數(shù) { new RegExp("(^|&)"+name+"=([^&]*)").exec(window.location.search.substr(1)); return RegExp.$2 }function isEven(num) //檢查奇偶數(shù) (偶數(shù) True 奇數(shù) False) { if(num%2==0) return true; else return false; }</script><div class="MainBook clearfix"><div class="CenterBook"><div id="ViewMag"><img onmousewheel="return bbimg($(this))" alt="" src="http://www.cnblogs.com/ariesjia/admin/" _fcksavedurl="http://www.cnblogs.com/ariesjia/admin/"></div><div class="MagMain"><div id="LeftMag"><!--[if IE]><span></span><![endif]--></div><div id="RightMag"><!--[if IE]><span></span><![endif]--></div></div><div class="ContralBook"><a id="L_bttn"><img alt="點(diǎn)擊左翻" src="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_066.png" _fcksavedurl="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_066.png" /></a> <a id="R_bttn"><img alt="點(diǎn)擊右翻" src="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_065.png" _fcksavedurl="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_065.png" /></a> <a id="Auto_bttn" <a><img alt="點(diǎn)擊自動(dòng)翻頁" src="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_067.png" _fcksavedurl="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_067.png" /></a> <a id="StopAuto_bttn"><img alt="停止自動(dòng)翻頁" src="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_059.png" _fcksavedurl="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_059.png" /></a> <a id="Copy_bttn"><img alt="復(fù)制鏈接給你朋友" src="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_101.png" _fcksavedurl="http://images.cnblogs.com/cnblogs_com/ariesjia/Developpers_Icons_101.png" /></a> </div></div><br /><center>網(wǎng)更多教程，請?jiān)L問：<a href=http://www.jyygyx.com/ target=_blank _fcksavedurl="http://www.jyygyx.com/ target=_blank">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

　　接口介紹

　　目前就有這么多，我會(huì)繼續(xù)更新的，既然是html的電子雜志，我會(huì)在下一個(gè) beta版中加入每個(gè)頁面能單獨(dú)配置HTML代碼的功能。

　　轉(zhuǎn)自：http://www.cnblogs.com/ariesjia/

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