turn.js 图书翻页效果

今天用turn.js 做图书的翻页效果遇到问题:

图片路径总是出错

调了一天,总算调出来了

我用的thinkphp,其他的不知道是不是一样

两个地方要改动:

1.后台查出地址

注意的地方:1.地址要完全的

      2.js要用json格式的数据

$more = M(‘File‘)->where(array(‘id‘=>$id))->find();
$more1 = json_decode($more[‘more‘],true);
  foreach($more1 as $k => $v){
  /*weburl 是网站域名  savepath 是图片存放地址*/
 $v[‘path‘] = C(‘WEBURL‘).‘/‘.$v[‘savepath‘];
 $type = end(explode(‘.‘,$v[‘name‘]));
 if(‘jpg‘ == $type){
      $more2[] = $v;
    }
 }
$more[‘more2‘] = $more2;
$more[‘more3‘] = json_encode($more2);
$this->assign(‘more‘,$more);

2.前台js形成需要的json数据往方法传

var more = <{$more.more3}>;
    var savepath = new Array();
    var i=1;
    $.each(more, function(e,v){
        savepath[i] = v.path;
        i++;
    });
missing: function (event, pages) {
    // Add pages that aren‘t in the magazine
    for (var i = 0; i < pages.length; i++){
    addPage(pages[i], $(this),savepath);
    }
}

3.magazine.js要改动

function addPage(page, book,data)
function loadPage(page, pageElement,data)

有好几个地方要改图片路径

img.attr(‘src‘, data[page]);
//img.attr(‘src‘, ‘pages/‘ +  page + ‘.jpg‘);
时间: 2024-10-11 13:27:51

turn.js 图书翻页效果的相关文章

turn.js (翻页效果)总结

Turn.js是一个内置的jQuery翻页插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script> 2  创建html <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"

turn.js实现翻书效果

JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备.Turn.js 支持硬件加速来让翻页效果更加平滑.可通过 API 来获取当前显示的页号,并提供选项来定制默认页号.加速器.阴影和延时. 图片展示: 兼容浏览器:IE6+/Firefox/Google Chrome官方链接:http://www.turnjs.com/JS下载:http://www.i

前端实现类似于iBooks的图书翻页效果的网络阅读软件(一)

昨天晚上在群里交流各种脑动大开的题目,我顺手也提了一个问题: JS如何做“字符分页“ 原意是源于我4年前公司项目,我负责开发1年的样子,后来各种原因就没有然后了… http://reader.appcarrier.com/     以上图片是手机上的截图,Metro风格当前可是风靡一时,软件本身是类似现在的”追书神器” 通过书名,在网络上搜索到对应的内容,之后保存到本地数据库.在通过JS获取数据再处理 自己装好测了下,貌似下载服务器已经挂了~ 程序采用PhoneGap打包的,数据采集是用底层完成

Turn.js 实现翻书效果的学习与总结

最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: http://www.tur

JS打造的拖拽翻页效果

<!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-

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

CSS3-----图片翻页效果的展示

在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般指向一个URL地址,也可以调用javascript,如href="javascript:xxx();",但是文档中推荐这样写<a href="http://www.111cn.net/zhongxing/U880/ javascript:void(0)" oncl

MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(2)

其实上文只是对如何加代码的顺序方法的表述,这里面的代码每个函数是什么意思,要如何理解?需要我们深思. 我们先大框子去理解:我们上文在控制器里只是去HTTPGET了,HTTPget理解其实就是请求.那么我么要保存,要插入的时候要怎么做. 上文在控制器里增加了NEW的动作,当然我们要增加NEW的视图(New.cshtml),视图里面会有一个代码. using(Ajax.BeginForm("New","DataModule",new AjaxOptions{ Inser

css3挂历翻页效果

翻页效果显示当前时间 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/test.css" /> <script type="t