您当前位置：首页 > web前端 > jquery > jQuery翻书插件JMagazine全新浏览体验

jQuery翻书插件JMagazine全新浏览体验

来源：程序员人生发布时间：2014-02-27 19:31:15 阅读次数：2607次

提供全新的浏览体验，单独的每一页都能够添加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.wfuyu.com/uploads/common/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script><link rel="stylesheet" href="http://www.wfuyu.com/uploads/allimg/1002/liehuo100107.css" type="text/css" title="main" /><script src="http://www.wfuyu.com/uploads/Common/js/ui.core.js" language="javascript" type="text/javascript"></script><script src="http://www.wfuyu.com/uploads/Common/js/ui.draggable.js" language="javascript" type="text/javascript"></script><script src="http://www.wfuyu.com/uploads/Common/js/jquery.mousewheel.js" language="javascript" type="text/javascript"></script><script src="http://www.wfuyu.com/uploads/Common/js/JTooltips.js" language="javascript" type="text/javascript"></script><script src="http://www.wfuyu.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="点击左翻" src="http://www.wfuyu.com/uploads/allimg/1002/Developpers_Icons_066.png" /></a><a id="R_bttn"><img alt="点击右翻" src="http://www.wfuyu.com/uploads/allimg/1002/Developpers_Icons_065.png" /></a><a id="Auto_bttn"><img alt="点击自动翻页" src="http://www.wfuyu.com/uploads/allimg/1002/Developpers_Icons_067.png" /></a><a id="StopAuto_bttn"><img alt="停止自动翻页" src="http://www.wfuyu.com/uploads/allimg/1002/Developpers_Icons_059.png" /></a><a id="Copy_bttn"><img alt="复制链接给你朋友" src="http://www.wfuyu.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第一页…加载推荐测试","Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m1.jpg","PageHtml":""},{"Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m2.jpg"},{"Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m3.jpg","PageHtml":"<a style='top:1px;left:1px;' href='#'>点击可以翻页哦！</a>"},{"Page":"http://www.wfuyu.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.wfuyu.com/uploads/Common/images/liehuo_net_m5.jpg"},{"Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m6.jpg"},{"Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m7.jpg"},{"Title":"JMagazine第八页…加载推荐测试","Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m8.jpg"},{"Page":"http://www.wfuyu.com/uploads/Common/images/liehuo_net_m9.jpg"},{"Page":"http://www.wfuyu.com/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.wfuyu.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("已经成功复制到你剪切板中");})$("#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.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：运行后刷新才能显示效果!

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

------分隔线----------------------------

上一篇 CSS3创建多重边框

下一篇 网站出现多个快照是百度原因还是网站的原因?

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点