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/ 当然第一版做的时候加载很慢很慢,原版插件会把所有图片加载出来再显示页面.很不爽的体验就改 ...
随机推荐
- 剑指offer一:二维数组中的查找
题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路: 这是一个顺序二维 ...
- CentOS6.5 安装 jdk1.7
1.卸载centos自带的jdk # rpm -qa | grep java 结果大致为: tzdata-java-2012c-1.el6.noarch java-1.7.0-openjdk-1.7. ...
- 单据BE构建
本节来构建单据BE1.新建单据BE实体项目,修改命名空间 2.引入单据基类如下图所示,在UFIDA.U9.Base.BaseBE.MetaData命名空间下将类Doc托至设计BE视图中 3.分别托2个 ...
- Scrum Meeting 3-20151203
任务安排 姓名 今日任务 明日任务 困难 董元财 请假(明天是编译截至最后一天) 学习上拉加入新的listview 无 胡亚坤 请假(明天是编译截至最后一天) 设计优化聊天页面 无 刘猛 请假(明天是 ...
- js中对radio和checkbox是否选中的判断
一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...
- jquery中通过全局变量来禁止多次ajax请求
var ajaxstate=false;//定义全局变量,通过这个变量来获得当前的ajax状态 $(function(){ $(document).ajaxStart(function(){ $(&q ...
- Windows2012安装IIS和FTP
Windows2012安装IIS和FTP 1.打开Windows 2012的服务器管理器,选择 管理→添加角色和功能 2.进入 添加角色和功能向导,选择 “Web服务器(IIS)” 3.根据情况选 ...
- Python_Day2_基础2
python基础之数据类型与变量 一.变量 变量作用:保存状态(程序的运行本质是一系列状态的变化,变量的目的就是用来保存状态,变量值的变化就构成了程序运行的不同结果.) Age=10 ----> ...
- Yii批量添加的问题
使用Yii进行批量添加的时候,执行后会发现表中只插入了foreach循环的最后一条数据,而其它数据没有添加成功,那是因为内存地址中循环时新一条数据会覆盖前一条数据,解决办法如下: 第一种方法: < ...
- mousedown(function(){ return false; })作用
mousedown(function(){ return false;}); 阻止浏览器的默认行为. 比如a你加个空连接,可能会在当前页跳转, 你加了这句,就可以阻止a跳转,然后只执行js函数的代 ...