今天用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. 关于Python中输出中文的一点疑问

    #encoding=gb2312 import urllib import re def getHtml(url): page = urllib.urlopen(url) html = page.re ...

  2. 【数位dp】

    hdu5787 问:L ~ R有多少个数是K-wolf Number?其中,K-wolf Number的定义是这个数在十进制下,任意相邻的K个字符没有相同的. dp[i][j][k]表示有i个空位可填 ...

  3. 程序设计入门——C语言 第2周编程练习 信号报告(5分)

      2   题目内容: 无线电台的RS制信号报告是由三两个部分组成的: R(Readability) 信号可辨度即清晰度. S(Strength)    信号强度即大小. 其中R位于报告第一位,共分5 ...

  4. jconsole的使用

    1.首先添加java运行参数: -Xms256m -Xmx1024 -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port ...

  5. web应用程序测试方法和测试技术详述

    1.界面测试 现在一般人都有使用浏览器浏览网页的经历,用户虽然不是专业人员但是对界面效果的印象是很重要的.如果你注重这方面的测试,那么验证应用程序是否易于使用就非常重要了.很多人认为这是测试中最不重要 ...

  6. java环境变量设定

    1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0 ...

  7. 6/17 Sprint3

    首页改进:

  8. phpstormn 中 xdebug 的详细配置2

    配置PHPStorm 图1:首先配置PHP解释器的路径 图2:File>Settings>PHP>Servers,这里要填写服务器端的相关信息,name填localhost,host ...

  9. iis 301重定向

    把www.a.com重定向到www.b.com 只需在www.a.com上面右键属性---主目录,重定向到url,下面填上www.b.com,再把资源永久重定向勾选上即可. 注意,如果你需要把域名后面 ...

  10. 回车键转tab键解决方案二

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...