jQuery实现翻书效果源码_Javascript教程_H5之家 - 中国HTML5教程资源分享第一站

教程网3月27日整理

提供全新的浏览体验，单独的每一页都能够添加HTML代码
这是我做的一个小小的试例，用了 jquery ui，以及前面制作的JTooltips
操作：  1.左键翻页
      2.右键放大,放大的图片可以用鼠标拖动和滑轮滚动，在放大图片的时候右键点击关闭（因为有了多个鼠标右键的操作说以我吧右键的菜单给屏蔽了）
      3.自动翻页自动记录上一操作为前翻或者后翻，并保持状态
      4.url中有page这个值，这个值设定杂志的初始页面，发送链接时候记录
如果出现错误，请先刷新一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyShow</title>
<script src="" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" href="" type="text/css" charset="utf-8" title="main" />
<script src="" language="javascript" type="text/javascript"></script>
<script src="" language="javascript" type="text/javascript"></script>
<script src="" language="javascript" type="text/javascript"></script>
<script src="" language="javascript" type="text/javascript"></script>
<script src="" 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"><img class="viewBigIMG" /></div></div>
  </div>
</div>

<div class="ContralBook">
<a id="L_bttn"><img alt="点击左翻" src="" /></a>
<a id="R_bttn"><img alt="点击右翻" src="" /></a>
<a id="Auto_bttn"><img alt="点击自动翻页" src="" /></a>
<a id="StopAuto_bttn"><img alt="停止自动翻页" src="" /></a>
<a id="Copy_bttn"><img alt="复制链接给你朋友" src="" /></a>
</div>
</div>
<script language="javascript" type="text/javascript">
var json ={
"MagIfo":{"MagName":"JMagazine插件Demo","PageCount":"10"},
"MagPage":[
          {"Title":"JMagazine第一页…加载推荐测试","Page":"","PageHtml":""},
          {"Page":""},
          {"Page":"","PageHtml":"<a href='#'>you are shit2</a>"},
          {"Page":"","PageHtml":"<div>这里是HTML代码</div>"},
          {"Page":""},
          {"Page":""},
          {"Page":""},
          {"Title":"JMagazine第八页…加载推荐测试","Page":""},
          {"Page":""},
          {"Page":""}
          ]
}
//全局设置变量
function Request(name) //获取当前页面参数
{
   new RegExp("(^|&)"+name+"=([^&]*)").exec(window.location.search.substr(1));
   return RegExp.$2
}
$(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="" 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>