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/ 当然第一版做的时候加载很慢很慢,原版插件会把所有图片加载出来再显示页面.很不爽的体验就改 ...
随机推荐
- CentOS----使用yum命令出现“could not retrieve mirrorlist http://mirrorlist.centos.org ***” - ybq155”
无聊安装了个mini版的32位的CentOS 6.5,进来想安装个东西,yum install emacs 提示什么 Loaded plugins: fastestmirror, refresh-pa ...
- java mail发送邮件
最近做了自动发送邮件功能,带附件的:需要的jar包有
- Myeclipse 找不到Convert to maven project选项
https://my.oschina.net/u/2419190/blog/504417 Window > Preferences > General > Capabilities ...
- [ubuntu14.04 amd64 ]搜狗拼音輸入法安裝
这个网址下载之后,双击下载的deb文件http://mirrors.sohu.com/deepin/pool/non-free/f/fcitx-sogoupinyin-release/ 就会在ubun ...
- contiki-进程
进程的结构 Contiki的进程由两部分组成:进程控制块和进程线程.进程控制块存储在内存中,它包含进程运行时的信息,比如:进程名.进程状态.指向进程线程的指针. 进程线程是存储在ROM中的一个代码块. ...
- 最精简的django程序
一.程序框架 1.结构图
- android应用锁之监听应用前后台切换方式
今天在做技术总结,顺便就把知识共享,个人崇尚分享. 通过以下方式来监听是不是发生了应用的前后台切换: 1. android api 10 – 15 通过ActivityManager register ...
- javasrcipt中的for in 循环
function myFunction(){ var x; //声明变量x: var txt=""; //声明变量txt并赋值为空: var person={fname:&qu ...
- 如何在MapControl界面添加双击事件实现标绘及符号样式更改
private void axMapControl1_OnDoubleClick(object sender, ESRI.ArcGIS.Controls.IMapControlEvents2_OnDo ...
- SSH原理与运用
SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很多普通用户也每天使用. SSH具备多种功能,可以用于 ...