jQuery实现翻书效果源码

文章类别：Javascript | 发表日期:2010-3-27 13:36:38

21视频教程网3月27日整理

提供全新的浏览体验，单独的每一页都能够添加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=utf-8" />
<title>EasyShow</title>
<script src="http://files.cnblogs.com/ariesjia/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" href="http://files.cnblogs.com/ariesjia/mag.css" type="text/css" charset="utf-8" title="main" />
<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//jquery.mousewheel.js" language="javascript" type="text/javascript"></script>
<script src="http://files.cnblogs.com/ariesjia/JTooltips.js" language="javascript" type="text/javascript"></script>
<script src="http://files.cnblogs.com/ariesjia//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://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" /></a>
<a id="Auto_bttn"><img alt="点击自动翻页" src="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" /></a>
<a id="Copy_bttn"><img alt="复制链接给你朋友" src="http://images.cnblogs.com/cnblogs_com/ariesjia/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://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine01.jpg","PageHtml":""},
          {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine02.jpg"},
          {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine03.jpg","PageHtml":"<a style='top:1px;left:1px;' href='#'>you are shit2</a>"},
          {"Page":"http://images.cnblogs.com/cnblogs_com/ariesjia/JMagazine04.jpg","PageHtml":"<div style='top:50px;left:50px;width:100px;height:100px;overfllow:hidden;background:#f00;color:#FFF;'>这里是HTML代码</div>"},
          {"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"}
          ]
}
//全局设置变量
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="http://images.cnblogs.com/cnblogs_com/ariesjia/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>

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网