搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
羊村懒王
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
C++STL容器之deque
2
2023年第十四届蓝桥杯省赛Python大学B组真题解析
3
python 正则匹配任意字符串(包括换行符,空白等)--主用于文本_python 正则 匹配任意字符串,包括\n
4
图文版Palworld幻兽帕鲁多人联机服务器搭建教程
5
LeetCode 每日一题127:单词接龙_leetcode 单词接龙 给出两个单词(start和end)和一个字典,找出从start到end的
6
windows+deepin v23 linux 双系统 安装前后 与 删除后 的硬盘efi分区情况,deepin v23 beta2的一些体验
7
【已解决】本地计算机上的mysql服务启动停止后,某些服务在未由其他服务或程序使用时将自动停止_mysql服务启动后停止,某些程序在未有应用
8
数据可视化 D3.js 力导向图右键菜单实现动态添加节点_d3.v3.js 动态添加节点
9
【超详细】VScode下载、安装即远程链接教程_vscode下载网址
10
HTML5+调用手机/相册 上传图片及回显_h5 调用本地相册/相机上传图片,并回调
当前位置:
article
> 正文
推荐一个HTML 5下的翻书效果插件turn js
作者:羊村懒王 | 2024-02-19 22:52:11
赞
踩
turnjs
要想在ipad等上做翻书的效果?以前看起来比较麻烦,现在就简单多了,
强烈推荐一个叫turn.js的效果,网站在http://www.turnjs.com
,使用起来很简单,另外有一篇不错的教程,是jquery+turn.js+php的,用来获得在
Instagram上的图片,地址在:
http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/
下面简单小结下turn.js的用法,
<div id="magazine" class="centerStart">
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/turn.js"></script>
这里,只需要要显示的层的ID命名为magzine即可,然后用PHP读数据库,生成相关的页面图片如下
<div id="magazine" class="centerStart">
<div id="page1" class="page">
<div class="img1">
<span class="pageNum right">1 // 32</span>
[img]assets/img/cover.jpg" alt="Cover[/img]
</div>
</div>
..........................
</div>
相关的CSS:
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}
然后jquery中调用:
$(function(){
var mag = $('#magazine');
//调用插件的turn方法
mag.turn();
mag.bind('turned', function(e, page, pageObj) {
if(page == 1 && $(this).data('done')){
//如果是首页,可以进行一些样式的设计
mag.addClass('centerStart').removeClass('centerEnd');
}
//如果是封底,进行一些样式的设计
else if (page == 32 && $(this).data('done')){
mag.addClass('centerEnd').removeClass('centerStart');
}
else {
mag.removeClass('centerStart centerEnd');
}
});
setTimeout(function(){
mag.fadeTo(500,1);
},1000);
//控制当使用键盘的前后键,也可以进行控制
$(window).bind('keydown', function(e){
// listen for arrow keys
if (e.keyCode == 37){
mag.turn('previous');
}
else if (e.keyCode==39){
mag.turn('next');
}
});
});
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/羊村懒王/article/detail/117181
推荐阅读
article
养老
院
|基于
Springboot
的
养老
院
管理系统
设计与实现(源码+
数据库
+文档)_智慧
养老
推荐 sp...
计算机上安装
养老
院
管理系统
软件来发挥其高效地信息处理的作用,可以规范信息管理流程,让管理工作可以系统化和程序化,同时,养...
赞
踩
article
HTML
+
CSS
:
3D
轮播
卡片
...
整个页面的背景是一个占据整个屏幕的背景图片,并且页面内容被隐藏在背景图片之下。
HTML
+
CSS
:
3D
轮播
卡片
...
赞
踩
article
element
-
ui
table
表头
文字
不换行,
文字
过长
点点
...
展示,同时给表头添加悬浮提示.....
表头
文字
不换行超过
点点
...
展示给表头添加悬浮提示在
element
中的
table
对slot-scope的值封装成了一个大...
赞
踩
article
swt
入门---
http
://
www
.
blogjava
.
net
/dreamstone/archive...
swt
入门 --常用组件的使用
swt
的常用组件button ,text ,combo,list ,还有一些容器类com...
赞
踩
article
html
页面
上传
图片
回显
,
html
js
上传
图片
并
回显
...
html
js
上传
图片
并
回显
发布时间:2018-08-03 14:27,浏览次数:808, 标签:
html
jssrc=...
赞
踩
article
html
实现
调取
手机
相机进行
拍照
上传
——技能提升
_
拍照
上传
的
插件
html
...
今天同事问我一个我之前参与
的
项目,由于之前只做了样式,并没有书写功能,因此同事接手后需要做一个
html
实现
手机
拍照
上传
的
...
赞
踩
article
Print
.
js
实现
打印
pdf
,
HTML
,图片(可设置样式可分页)_print
js
...
Print
.
js
四种
打印
类型:'
pdf
'、'html'、'image'、'
js
on'一文搞懂_print
js
printj...
赞
踩
article
[
HTML
]Web
前端开发
技术22(
HTML
5
、
CSS3
、
JavaScript
)
HTML
5
基础与...
前言
CSS3
转换transform 属性 2.
CSS3
3D 转换
CSS3
过渡transition 属性Transi...
赞
踩
article
Flutter
:
加载
本地
Html
、
WebView
与JS交互_
flutter
loadurl
html
...
本次教程使用的是
Flutter
官方提供的WevView组件webview_
flutter
2.3.1,
flutter
_a...
赞
踩
article
编程
新手导论_
关于
方法
reg
和do
reg
,说法正确的
是
用户访问流程
是
reg
reg
.
html
dor...
第二部分 导论,这一部分主要
是
关于
编程
的导论,(要懂得一点思想具备一点常识)《设计,编码,,与软工》(
编程
与思想)这一章...
赞
踩
article
Python
爬虫——使用
XPath
和
lxml
库解析
HTML
_lis =
html
.
xpath
('//...
文章目录0 安装
XPath
Helper 插件1
XPath
语法1.1 节点1.2 谓语2
lxml
库使用实例2....
赞
踩
article
python3
爬虫五大模块之四:网页解析器
_
soup
= beautiful
soup
(
html
, ...
Python的爬虫框架主要可以分为以下五个部分:爬虫调度器:用于各个模块之间的通信,可以理解为爬虫的入口与核心(main...
赞
踩
article
html
div
图
层
,
Div
+
CSS
布局
入门教程
(2.写入整体
层
结构与
CSS
)_
html
/
css
_...
Div
+
CSS
布局
入门教程
(2.写入整体
层
结构与
CSS
)接下来我们在桌面新建一个文件夹,命名为“DIV+
CSS
布局练习...
赞
踩
article
echarts
大屏
可视化
,
HTML
+
CSS
加载全国、或某一
省市
(
安徽省
)(各个
省市
县)
地图
_
html
...
echarts
大屏
可视化
,
HTML
+
CSS
加载全国、或某一
省市
(
安徽省
)(各个
省市
县)
地图
_
html
+
css
大屏
页面开发...
赞
踩
article
html
在框架里
弹出
页面
,
iframe
弹出
新
窗口
iframe
页面
打开
新
窗口
问题...
如何使
iframe
中的链接都在
新
窗口
打开
a.
html
文件源码如下 如何让所有链接在
新
窗口
打开
2008-07-24 21:...
赞
踩
article
HTML
弹出
框功能_
html
弹出
框...
HTML
弹出
框功能_
html
弹出
框
html
弹出
框
HTML
弹...
赞
踩
article
html
+
jquery
/js+
css
实现
Table
tr
鼠标
悬停
/点击
出现
弹窗,显示表格行数据_h...
html
定义一个div作为弹窗,主要实现的控制样式:display=‘block/none’,使我们定义的div隐藏或者...
赞
踩
article
HTML
+
CSS
大
作业
:使用
html
设计
一个简单好看的公司官网
首页
浮动布局_
企业
首页
html
...
企业
首页
html
...
赞
踩
article
jquery
html
()
方法
返回图片,
jQuery
html
()
方法
...
jQuery
html
()
方法
html
()
方法
获取或设置所选元素的内容(innerHTML)。使用
html
()
方法
获取...
赞
踩
article
Html
中几种
图片格式
的
区别与使用--我
的
笔记_
src
=
"
.png
"
html
...
在HTML中通过 img
src
=“图片路径” 引入图片。常见
的
图片格式
有JPEG(JPG),PNG,GIF.GIF图片...
赞
踩
相关标签
spring boot
养老院管理系统
养老院
java
毕设
课程设计
源码
css
前端
若冰说CSS
elementui
shell
开发工具
html页面上传图片回显
html
vue.js
javascript
pdf
html5
计算机学习
css3
android
屏幕适配
flutter