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');
turn.js 图书翻页效果的更多相关文章
- jQuery中turn.js(翻页效果)学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...
- 纯css3写的仿真图书翻页效果
对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...
- JQuery的turn.js实现翻书效果
前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...
- Turn.js 实现翻书效果
Turn.js的官方网址: http://www.turnjs.com/ 官网上运行demo如下,大家主要关注是 属性使用: <!DOCTYPE html> <html> &l ...
- Turn.js 实现翻书效果(自适应单双页)
来源:https://www.cnblogs.com/hellman/p/10683492.html在上面的来源基础上增加页码显示,自适应单双页PC端效果: 移动端展示: 源码下载地址:http:// ...
- turn.js中文API 写一个翻页效果的参数详细解释
$('.flipbook').turn({ width: 922, height: 600, elevation: 50, gradients: true, a ...
- 翻页效果实现turn.js
使用插件turn.js实现翻书功能. 看下效果:http://yk.wanxue.cn/2019/01/yd/ 当然第一版做的时候加载很慢很慢,原版插件会把所有图片加载出来再显示页面.很不爽的体验就改 ...
随机推荐
- 关于web2py外网访问,图形界面不显示等问题的解决办法
首先系统版本是ubuntu 15.04,系统默认安装了两个版本的python, sudo python web2py.py 默认会调用python2.7版本来执行 会提示 pydo@planpls:/ ...
- JDK中的native2ascii命令详解
1.native2ascii简介: native2ascii是sun java sdk提供的一个工具.用来将别的文本类文件(比如*.txt,*.ini,*.properties,*.java等等)编码 ...
- transition&transform,CSS中过度和变形的设置
设置样式的过度效果transition-property: none/all; transition-duration:2s;运动时间,默认是0秒 transition-delay:0s; 延迟时间默 ...
- 习题-第1章了解ASP.NET MVC
一.选择题 1.ASP.NET MVC自2007年首次公布预览以来,作为( )的替代品,普及度已明显提高,现在很多大型Web应用程序都是使用这一技术构建的. A.ASP B.ASP.NET ...
- canvas滤镜之简单的取反
自己学习了一下canvas滤镜 编写一个简单的小界面,嘿嘿! 注释都在里面啦啦啦,感兴趣的来瞅瞅哦
- 20169212《Linux内核原理与分析》第二周作业
<Linux内核原理与分析>第二周作业 这一周学习了MOOCLinux内核分析的第一讲,计算机是如何工作的?由于本科对相关知识的不熟悉,所以感觉有的知识理解起来了有一定的难度,不过多查查资 ...
- C# 跨线程调用控件
在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应. 同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线程间操作无效 第一种办法:禁 ...
- WC2015 酱油记
这是真·酱油记! Day0 因为我们在上海,所以只要坐高铁就可以了2333.到了火车站以后我们坐大巴到学军中学恩,结果坐大巴的时间和做坐高铁的时间差不做←_←. 吐槽了一下住宿环境和课程表就已经晚上了 ...
- mac os 中类似于Linux的yum工具,或ubuntu的apt-get工具Homebrew
Linux下的yum用着真省心! mac下的相类似的软件是Homebrew 使用前需要先安装它, ruby -e "$(curl -fsSL https://raw.githubuserco ...
- POJ 3020 Antenna Placement 匈牙利算法,最大流解法 难度:1
http://poj.org/problem?id=3020 #include <cstdio> #include <cstring> #include <vector& ...