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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
jquery动态添加option示例
Dec 30 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
建立动态的WML站点(一)
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python输出pdf文档的实例
2020/02/13 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python编写实现抽奖器
2020/09/10 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
类如何去实现接口
2013/12/19 面试题
劲霸男装广告词
2014/03/21 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
投诉书格式范本
2015/07/02 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
总结Python常用的魔法方法
2021/05/25 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis