今天用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');

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

  1. jQuery中turn.js(翻页效果)学习笔记

    Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...

  2. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

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

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  4. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

  5. JQuery的turn.js实现翻书效果

    前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...

  6. Turn.js 实现翻书效果

    Turn.js的官方网址: http://www.turnjs.com/ 官网上运行demo如下,大家主要关注是 属性使用: <!DOCTYPE html> <html> &l ...

  7. Turn.js 实现翻书效果(自适应单双页)

    来源:https://www.cnblogs.com/hellman/p/10683492.html在上面的来源基础上增加页码显示,自适应单双页PC端效果: 移动端展示: 源码下载地址:http:// ...

  8. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  9. 翻页效果实现turn.js

    使用插件turn.js实现翻书功能. 看下效果:http://yk.wanxue.cn/2019/01/yd/ 当然第一版做的时候加载很慢很慢,原版插件会把所有图片加载出来再显示页面.很不爽的体验就改 ...

随机推荐

  1. Android复习指南

    基础无外乎几部分:语言(C/C++或java),操作系统,TCP/IP,数据结构与算法,再加上你所熟悉的领域.这里面其实有很多东西,各大面试宝典都有列举. 在这只列举了Android客户端所需要的和我 ...

  2. c++ 文件读写模板

    #include <fstream> using namespace std; int main() { ifstream fin("in.txt"); ofstrea ...

  3. php_match/preg_match_all 默认有字符串长度限制

    php_match/preg_match_all 默认有字符串长度限制:52500(或许你的服务器环境是更长,或者更短),当字符串长度大于52500,只能匹配到52500数据,超出的部分会被系统自己截 ...

  4. js的常用api

    JavaScript常用API总结 原创 2016-10-02 story JavaScript 下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属 ...

  5. json 解析 真是一篇让我泪流满面的好文章

    http://my.eoe.cn/iceskysl/archive/19629.html点击打开链接

  6. linux性能测试命令-----top

    Top命令显示了实际CPU使用情况,默认情况下,它显示了服务器上占用CPU的任务信息,并且每5秒钟刷新一次.它会显示CPU使用量.内存使用量.交换内存.缓存大小.缓冲区大小.流程PID.用户.命令等. ...

  7. Yii 提示Invalid argument supplied for foreach() 等错误

    Yii 提示Invalid argument supplied for foreach() 或者 undefined variable: val等错误 只需要在对应的文件中加入error_report ...

  8. JavaScript的sleep延时函数

    JavaScript没有像Java的sleep延时函数,所以记录JavaScript的sleep延时函数 function sleep(milliSeconds) { var startTime = ...

  9. js获取手机联网状态

    window.addEventListener("offline", function() { alert('offline') }, false); window.addEven ...

  10. Objective-C的面向对象中,类有真正的私有方法和私有属性么?

    在Java/C#等面向对象语言中,方法的访问权限可以通过public/private/protected来控制其访问权限.而在OC中,方法却并没有访问修饰符.那么,我们有没有办法使其方法变为私有? 1 ...