JavaScript中transform实现数字翻页效果


Posted in Javascript onMarch 08, 2017

效果图:

JavaScript中transform实现数字翻页效果

图(1)初始图

JavaScript中transform实现数字翻页效果

图(2)翻页过程

JavaScript中transform实现数字翻页效果

图(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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue动态组件实现选项卡切换效果
Mar 08 #Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 #Javascript
完美实现js选项卡切换效果(一)
Mar 08 #Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 #Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
You might like
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python导入坐标点的具体操作
2019/05/10 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
行政助理求职自荐信
2013/10/26 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
基于Python实现nc批量转tif格式
2022/08/14 Python