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/ 当然第一版做的时候加载很慢很慢,原版插件会把所有图片加载出来再显示页面.很不爽的体验就改 ...
随机推荐
- jquery总结03-遍历节点
这是用的最多的 向下遍历节点 children() 第一级子元素 相当于li>span find() 多级子孙元素 相当于li span 注意:.filter(':contains(&qu ...
- fifter过滤器
package fifter; import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterCh ...
- Android 检查手机网络是否可用
添加网络状态权限 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 代 ...
- theano + gpu
Teano安装测试 1. Anaconda 安装 Anaconda是一个科学计算环境,自带的包管理器conda很强大.之所以选择它是因为它内置了python,以及numpy.scipy两个必要库和一些 ...
- python之map、filter、reduce、lambda函数 转
python之map.filter.reduce.lambda函数 转 http://www.cnblogs.com/kaituorensheng/p/5300340.html 阅读目录 map ...
- jquery打字机效果
html代码 <div id="box"> <div id="content"> <div id="code" ...
- openwrt 的依赖找不到问题
Openwrt报告库找不到Package * is missing dependencies for the following libraries: libc.so.6 或其他先检查系统里面有没有这 ...
- C关键字
1 extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义
- iOS 视图控制器转场详解
iOS 视图控制器转场详解 前言的前言 唐巧前辈在微信公众号「iOSDevTips」以及其博客上推送了我的文章后,我的 Github 各项指标有了大幅度的增长,多谢唐巧前辈的推荐.有些人问我相关的问题 ...
- 回车键转tab键
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...