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

发布时间：2018-08-13 18:25:29 所属栏目：业界来源：站长网

导读：提供全新的浏览体验，单独的每一页都能够添加HTML代码这是我做的一个小小的试例，用了 jquery ui，以及前面制作的JTooltips 操作： 1.左键翻页 2.右键放大,放大的图片可以用鼠标拖动和滑轮滚动，在放大图片的时候右键点击关闭(因为有了多个鼠标右键的操

提供全新的浏览体验，单独的每一页都能够添加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.veryhuo.com/uploads/common/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script> <link rel="stylesheet" href="http://www.veryhuo.com/uploads/allimg/1002/liehuo100107.css" type="text/css" title="main" /> <script src="http://www.veryhuo.com/uploads/Common/js/ui.core.js" language="javascript" type="text/javascript"></script> <script src="http://www.veryhuo.com/uploads/Common/js/ui.draggable.js" language="javascript" type="text/javascript"></script> <script src="http://www.veryhuo.com/uploads/Common/js/jquery.mousewheel.js" language="javascript" type="text/javascript"></script> <script src="http://www.veryhuo.com/uploads/Common/js/JTooltips.js" language="javascript" type="text/javascript"></script> <script src="http://www.veryhuo.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.veryhuo.com/uploads/allimg/1002/Developpers_Icons_066.png" /></a> <a id="R_bttn"><img alt="点击右翻" src="http://www.veryhuo.com/uploads/allimg/1002/Developpers_Icons_065.png" /></a> <a id="Auto_bttn"><img alt="点击自动翻页" src="http://www.veryhuo.com/uploads/allimg/1002/Developpers_Icons_067.png" /></a> <a id="StopAuto_bttn"><img alt="停止自动翻页" src="http://www.veryhuo.com/uploads/allimg/1002/Developpers_Icons_059.png" /></a> <a id="Copy_bttn"><img alt="复制链接给你朋友" src="http://www.veryhuo.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.veryhuo.com/uploads/Common/images/liehuo_net_m1.jpg","PageHtml":""}, {"Page":"http://www.veryhuo.com/uploads/Common/images/liehuo_net_m2.jpg"}, {"Page":"http://www.veryhuo.com/uploads/Common/images/liehuo_net_m3.jpg","PageHtml":"<a style='top:1px;left:1px;' href='#'>点击可以翻页哦！</a>"}, {"Page":"http://www.veryhuo.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.veryhuo.com/uploads/Common/images/liehuo_net_m5.jpg"}, {"Page":"http://www.veryhuo.com/uploads/Common/images/liehuo_net_m6.jpg"}, {"Page":"http://www.veryhuo.com/uploads/Common/images/liehuo_net_m7.jpg"}, {"Title":"JMagazine第八页…加载推荐测试","Page":"http://www.veryhuo.com/uploads/Common/images/liehuo_net_m8.jpg"}, {"Page":"http://www.veryhuo.com/uploads/Common/images/liehuo_net_m9.jpg"}, {"Page":"http://www.veryhuo.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为默认<b>运动</b>速度 var Volume; // NULL为默认音量 var MagJson; // 杂志信息 $(function(){ document.oncontextmenu=new Function("event.returnValue=false;"); //禁止右键功能,单击右键将无反应 MagJson = json; document.title=json.MagIfo.MagName; //修改该页的title 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; //定义第当然页数默认为第一页 $(".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.veryhuo.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")+"n"+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; else return false; } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：运行后刷新才能显示效果!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

壹号本新款 ONE XPLAY	特斯拉前 CTO 电动汽车
华硕公布新款天选3 搭	主流显卡最新场批价曝