超实用的jquery实现翻书效果

查看效果

下载地址

超实用的jquery实现翻书效果，前台部分代码

 

代码

<! 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 - Download by http: // www.codefans.net</title>
< script src = " js/jquery-1.3.2.min.js "  language = " javascript "  type = " text/javascript " ></ script >
< link rel = " stylesheet "  href = " skin/index.css "  type = " text/css "  charset = " utf-8 "  title = " main "   />
< link rel = " stylesheet "  href = " skin/JTooltips.css "  type = " text/css "  charset = " utf-8 "  title = " main "   />
< script src = " js/ui.core.js "  language = " javascript "  type = " text/javascript " ></ script >
< script src = " js/ui.draggable.js "  language = " javascript "  type = " text/javascript " ></ script >
< script src = " js/jquery.mousewheel.js "  language = " javascript "  type = " text/javascript " ></ script >
< script src = " js/JTooltips.js "  language = " javascript "  type = " text/javascript " ></ script >
< script src = " 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 = " config " >
                 < div style = " padding:2em; line-height:20px; font-family:微软雅黑; " >
                 < h1 style = " font-weight:normal " > 翻页动画选项选择 </ h1 >
                 < h3 > Tween类型： </ h3 >  
                  < input name = " Radio1 "  type = " radio "   /> Linear   < input name = " Radio1 "  type = " radio "   /> Quadratic   < input name = " Radio1 "  type = " radio "   /> Cubic   < input name = " Radio1 "  type = " radio "   /> Quartic   < input name = " Radio1 "  type = " radio "   /> Quintic   < input name = " Radio1 "  type = " radio "   /> Sinusoidal 
                  < input name = " Radio1 "  type = " radio "   /> Exponential   < input name = " Radio1 "  type = " radio "   /> Circular   < input name = " Radio1 "  type = " radio "   /> Elastic   < input name = " Radio1 "  type = " radio "   /> Back   < input name = " Radio1 "  type = " radio "   /> Bounce 
                
                 < h3 > ease类型： </ h3 >  
                  < input name = " Radio2 "  type = " radio "   /> easeIn   < input name = " Radio2 "  type = " radio "   /> easeOut   < input name = " Radio2 "  type = " radio "   /> easeInOut 
                  </ div >
                 </ div >
               </ 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 = " Fir_bttn " >< img src = " images/Developpers_Icons_064.png "  alt = " 点击翻到第一页 " /></ a >
< a id = " L_bttn " >< img src = " images/Developpers_Icons_066.png "  alt = " 点击左翻 " /></ a >
< a id = " R_bttn " >< img src = " images/Developpers_Icons_065.png "  alt = " 点击右翻 " /></ a >
< a id = " Las_bttn " >< img src = " images/Developpers_Icons_063.png "  alt = " 点击翻到最后一页 " /></ a >
< a id = " Auto_bttn " >< img src = " images/Developpers_Icons_067.png "  alt = " 点击自动翻页 " /></ a >
< a id = " StopAuto_bttn " >< img src = " images/Developpers_Icons_059.png "  alt = " 停止自动翻页 " /></ a >
< a id = " Copy_bttn " >< img src = " images/Developpers_Icons_101.png "  alt = " 复制链接给你朋友 " /></ 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> " },
          { " 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 " }
          ]
}
</ script >
< script src = " mag.js "  language = " javascript "  type = " text/javascript " ></ script >
</ body >
</ html >

 

 

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/20/1761239.html