JavaScript中transform实现数字翻页效果
效果图：
图（1）初始图
图（2）翻页过程
图（3）翻页结果
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
#container{ width:500px; height:500px; margin:20px auto; background:#ff0000;
-webkit-transiton:background 2s linear,width 2s,height 2s;
-moz-transition:background 2s,width 2s,height 2s;
-o-transition:background 2s,width 2s,height 2s;
-ms-transition:background 2s,width 2s,height 2s;
transition:background 2s,width 2s,height 2s;
}
#container:hover{ background: #00ff00;width:200px;height: 200px;}
#my3dspace{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow: hidden;
}
#pagegroup{
width: 400px;
height: 400px;
margin: 0 auto;
-webkit-transform-style:preserve-3d;
position: relative;
}
.page{
width: 360px;
height: 360px;
padding: 20px;
background-color: black;
color: white;
font-size: 360px;
font-weight: blod;
line-height: 360px;
text-align: center;
position: absolute;
}
#page1{
-webkit-transform-origin:top;
transform-origin:top;
-webkit-transition:-webkit-transform 1s linear;
transition:transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:top;
transform-origin:top;
-webkit-transition:-webkit-transform 1s linear;
transition:transform 1s linear;
-webkit-transform:rotateX(-90deg);
transform:rotateX(-90deg);
}
#op{
text-align: center;
margin: 40px auto;
}
</style>
</head>
<body>
<div id="my3dspace">
<div id="pagegroup">
<div class="page" id="page1">1</div>
<div class="page" id="page2">2</div>
<div class="page" id="page3">3</div>
<div class="page" id="page4">4</div>
<div class="page" id="page5">5</div>
<div class="page" id="page6">6</div>
</div>
</div>
<div id="op">
<a href="javascript:next()" rel="external nofollow" >next</a>
<a href="javascript:prev()" rel="external nofollow" >prev</a>
</div>
<script type="text/javascript">
var curIndex = 1;
function next(){
if(curIndex==6)
return;
var curPage = document.getElementById("page"+curIndex);
curPage.style.webkitTransform = "rotateX(90deg)";
curPage.style.transform = "rotateX(90deg)";
curIndex ++;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.webkitTransform="rotateX(0deg)";
nextPage.style.transform="rotateX(0deg)";
}
function prev(){
if(curIndex==1)
return;
var curPage =document.getElementById("page"+curIndex);
curPage.style.webkitTransform="rotateX(-90deg)";
curPage.style.transform="rotateX(-90deg)";
curIndex --;
var prevPage = document.getElementById("page"+curIndex);
prevPage.style.webkitTransform="rotateX(0deg)";
prevPage.style.transform="rotateX(0deg)";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
一个JS翻页效果
<IFRAME border=0 align=center marginWidth=0 marginHeight=0 src="1.htm" frameBorder=no width=200 scrolling=no height=200 style="border: 1px solid #CCCCCC" id="pic"></IFRAME> <a href="javascript:Page(-1)&quo
-
JS实现的3D拖拽翻页效果代码
本文实例讲述了JS实现的3D拖拽翻页效果.分享给大家供大家参考,具体如下: 以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法.感谢原创作者的创意,结果一样,但过程不一样哦.奉上代码,供大家参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT
-
Javascript表格翻页效果实现思路及代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover
-
js带前后翻页的图片切换效果代码分享
本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu
-
不错的Javascript表格翻页效果
表格翻页 body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } 2) days = arguments[2]; if(arguments.length > 3) path = arguments[3]; with(new Date()){ setDate(getDate()+days); days=toUTCString();
-
js键盘方向键 文章翻页跳转的效果[小说站常用已支持firefox]
一个小小的人性化功能,给用户很大的方便,所以如果你要做类似的网站,侠客建议还是加上哟. 先体验一下此功能吧: 按下向左方向键转到:www.baidu.com 按下向右方向键转到:www.google.com 按下向回车键转到:www.jb51.net 按下ctrl+enter回车键转到:www.jb51.net 实现本功能的javascript代码: 支持按键盘方向键翻页跳转的代码 document.onkeydown = pageEvent; var enableEnter = true; /
-
Javascript表格翻页效果的具体实现
表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {
-
超酷的鼠标拖拽翻页(分页)效果实现javascript代码
拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{
-
JavaScript 拖拽翻页效果代码
拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40
-
JavaScript中transform实现数字翻页效果
效果图: 图(1)初始图 图(2)翻页过程 图(3)翻页结果 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <style> #container{ width:500px; height:500px; margin:20px auto; ba
-
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件
-
Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果
废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi
-
javascript移动端 电子书 翻页效果实现代码
这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果 1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q
-
android中图片翻页效果简单的实现方法
复制代码 代码如下: public class PageWidget extends View { private Bitmap foreImage; private Bitmap bgImage; private PointF touchPt; private int screenWidth; private int screenHeight; private GradientDrawable shadowDrawableRL; private Gra
-
vue实现数字翻页动画
本文实例为大家分享了vue实现数字翻页动画的具体代码,供大家参考,具体内容如下 一.看效果 二.实现步骤 1.新建翻页组件scrollNumber.vue <template> <div class="count-flop" :key="compKey"> <div :class="item != '.' && item != ',' ?'count-flop-box':'count-f
-
ios电子书翻页效果代码详解
近实现了一个完整的电子书阅读器,支持txt和epub格式的电子书阅读,其中epub支持图文混排的方式展示.本文主要谈谈其中两种翻页效果的实现,分别为仿真翻页和水平滑动翻页. 仿真翻页 最合适的方案就是使用系统提供的UIPageviewcontroller了,不过默认的UIpageviewcontroller翻页时背面是白色的,而阅读器通常都会有背景色或背景图片,翻页时用户体验就很糟糕,比如就像下面这样 所以接下来主要说说如何修改背面颜色以达到美观的翻页效果. UIpageviewcontroll
-
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是