超炫电子杂志JQuery插件JMagazine

　　JMagazine是一个做什么的东西?

　　现在网络运用越来也丰富，电子杂志是一个很有趣的东西，不过大家看的大部分。基本都是flash的，有不易修改和加载过慢的缺点，JMagazine是一个在JQ下能帮你完成一个图片电子杂志的插件。

　　Current version: beta 0.1.3

　　Compressed filesize: 12,288 bytes

　　Author: Ariesjia

　　这是我做的一个小小的试例，用了 jquery ui，以及前面制作的JTooltips ，在博客园上我只是把杂志的大小改的小了一点，demo随后附上

　　操作：1.左键翻页

　　2.右键放大,放大的图片可以用鼠标拖动和滑轮滚动， 在放大图片的时候右键点击关闭(因为有了多个鼠标右键的操作说以我吧右键的菜单给屏蔽了)

　　3.自动翻页自动记录上一操作为前翻或者后翻，并保持状态

　　4.url中有page这个值，这个值设定杂志的初始页面，发送链接时候记录。

<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"> //全局设置 变量var AnimateStyle; // NULL为标准动画 如果为1为无动画版var AnimateSpeed; // NULL为默认运动速度 var Volume; // NULL为默认音量var MagJson; // 杂志信息var ViewTop;$(function(){document.oncontextmenu=new Function("event.returnValue=false;"); //禁止右键功能,单击右键将无反应document.onselectstart=new Function("event.returnValue=false;"); //禁止选择,无法复制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; //缓存临时数据 (同时考虑存在cookie中) var MagPage= json.MagPage; var starPage; if(Request("page")) //有Page参数分配当前页数 { var reqPage = Request("page"); if(isEven(reqPage )) starPage=reqPage-2; //偶数Page定义出现在右边 else starPage=reqPage-1; //奇数Page定义出现在左边 } else starPage=0; //定义第当然页数默认为第一页 $(".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调用的函数,和PageError相比优先级更高")}, PageLast:function(e){alert("翻到最后一页,测试PageLast"+"这是由PageFirst调用的函数")}, PageError:function(e){alert(e.errMessage+"这是由PageError接口统一调用的自定义错误接口，与PageFirst和PageLast没有冲突,PageLast与PageFirst优先级更高");} }); $("#Copy_bttn").click(function(){ window.clipboardData.setData("text",$(".MagMain").data("MagTitle")+""+window.location+"?page="+$(".MagMain").getPageNum()) alert("已经成功复制到你剪切板中"); }) $("#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) //获取当前页面参数 { new RegExp("(^|&)"+name+"=([^&]*)").exec(window.location.search.substr(1)); return RegExp.$2 }function isEven(num) //检查奇偶数 (偶数 True 奇数 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="点击左翻" 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="点击右翻" 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="点击自动翻页" 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="停止自动翻页" 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="复制链接给你朋友" 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>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

　　接口介绍

　　目前就有这么多，我会继续更新的，既然是html的电子杂志，我会在下一个 beta版中加入每个页面能单独配置HTML代码的功能。

　　转自：http://www.cnblogs.com/ariesjia/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠