PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    Flash翻书效果相册轮播插件——FlippingBook

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:FlippingBook是一款非常炫酷逼真的falsh翻书效果相册查看插件。能够动态加载相册目录里面的图片,只需要改下js图片路径即可。同大多数翻书...
    FlippingBook是一款非常炫酷逼真的falsh翻书效果相册查看插件。能够动态加载相册目录里面的图片,只需要改下js图片路径即可。同大多数翻书插件一样,FlippingBook支持鼠标拖动“书页”的边缘拖动。双击页面,可以放大图片浏览,支持拖动查看大图。此外本插件还支持下载、打赢等功能,点击右下角的按钮即可。

    源码下载地址

    使用方法:
    1、在head区域引入下面的js和css文件:
    <link href="css/liquid-green.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/liquid.js"></script>
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/flippingbook.js"></script>
    <script type="text/javascript" src="js/bookSettings.js"></script>

    2、在body引入下面的代码,由于本插件时全屏的,所以最好单独做个页面放本插件。
    <div id="fbContainer">
    <a class="altlink" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
    <div id="altmsg">Download Adobe Flash Player.</div></a>
    </div>
    <div id="fbFooter">
    <div id="fbContents">
      <select id="fbContentsMenu" name="fbContentsMenu"></select>
      <span class="fbPaginationMinor">p.&nbsp;</span>
      <span id="fbCurrentPages">1</span>
      <span id="fbTotalPages" class="fbPaginationMinor"></span>
    </div>
    <div id="fbMenu">
      <img src="img/btnZoom.gif" width="36" height="40" border="0" id="fbZoomButton" />
      <img src="img/btnPrint.gif" width="36" height="40" border="0" id="fbPrintButton" />
      <img src="img/btnDownload.gif" width="36" height="40" border="0" id="fbDownloadButton" />
      <img src="img/btnDiv.gif" width="13" height="40" border="0" />
      <img src="img/btnPrevious.gif" width="36" height="40" border="0" id="fbBackButton" />
      <img src="img/btnNext.gif" width="36" height="40" border="0" id="fbForwardButton" />
    </div>
    </div>
    注:上面代码的id为fbMenu是右下角的功能按钮。

    3、图片文件放在page文件夹,大图在page/large文件夹,大图和正常显示图片的名称必须一致。

    4、如果要改变图片默认路径、翻书插件的默认大小、背景颜色、按钮声音请在bookSetting.js修改。很简单,这里不赘述。
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-1368-1.html