HTML5

Wesley13
• 阅读 728
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <meta charset="utf-8">
  5   <title>HTML5-页面切换动画</title>
  6   <link href="animations.css" rel="stylesheet">
  7   <script src="modernizr.custom.js"></script>
  8   <script src="jquery-1.8.0.min.js"></script>
  9   <style>
 10     #viewsWrapper {
 11         top:0px;
 12         left:0px;
 13         width:300px;
 14         height:200px;
 15         position:relative;
 16         overflow: hidden;
 17     }
 18 
 19     #view1 {
 20         background:#dddd00;
 21     }
 22 
 23     #view2 {
 24         background:#ff00ff;
 25     }
 26 
 27     #view3 {
 28         background:#cc00ff;
 29     }
 30 
 31     #view4 {
 32         background:#00cccc;
 33     }
 34 
 35     .pt-page {
 36         width: 100%;
 37         height: 100%;
 38         position: absolute;
 39         top: 0;
 40         left: 0;
 41         visibility: hidden;
 42         overflow: hidden;
 43         -webkit-backface-visibility: hidden;
 44         -moz-backface-visibility: hidden;
 45         backface-visibility: hidden;
 46         -webkit-transform: translate3d(0, 0, 0);
 47         -moz-transform: translate3d(0, 0, 0);
 48         transform: translate3d(0, 0, 0);
 49         -webkit-transform-style: preserve-3d;
 50         -moz-transform-style: preserve-3d;
 51         transform-style: preserve-3d;
 52     }
 53     .pt-page-current,
 54     .no-js .pt-page {
 55         visibility: visible;
 56         z-index: 1;
 57     }
 58   </style>
 59   <script>
 60     //当前页面移动完毕
 61     var endCurrPage = false;
 62     //后续页面移动完毕
 63     var endNextPage = false;
 64     //入场动画和出场动画
 65     var outClass = '';
 66     var inClass = '';
 67 
 68     var animEndEventNames = {
 69             'WebkitAnimation' : 'webkitAnimationEnd',
 70             'OAnimation' : 'oAnimationEnd',
 71             'msAnimation' : 'MSAnimationEnd',
 72             'animation' : 'animationend'
 73         },
 74         // animation end event name
 75         animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]
 76 
 77     $(function() {
 78         //保存各个View的默认class
 79         $(".pt-page").each( function() {
 80             var $page = $( this );
 81             $page.data( 'originalClassList', $page.attr( 'class' ) );
 82         } );
 83         //设置默认页面
 84         $(".pt-page").eq(0).addClass( 'pt-page-current' );
 85 
 86         //添加动画样式单选框
 87         var str = "";
 88         for(var i=1;i<=67;i++){
 89             str += '<input type="radio" name="myAnimation" value="'+i+'" />效果'+i;
 90             if(i%7==0){
 91                 str += "<br/>";
 92             }
 93         }
 94         $("#radiosDiv").html(str);
 95     });
 96 
 97     //View切换
 98     function changeView(newView){
 99         //设置动画效果   
100         var animationType = $('input:radio[name="myAnimation"]:checked:eq(0)').val();
101         getAnimationClass(parseInt(animationType));
102 
103         $currPage = $(".pt-page-current").eq(0);
104         $nextPage = $(newView);
105 
106         //清除原来添加的动画,层级等样式
107         //(正常动画结束时会自动清除,这样做防止用户在动画结束前就点击切换其他的)
108         $(".pt-page").each( function() {
109             $(this).attr( 'class', $(this).data( 'originalClassList' ) );
110         });
111         $currPage.addClass("pt-page-current");
112         $nextPage.addClass("pt-page-current");
113 
114 
115         //如果就是当页则不切换
116         if($currPage.attr("id") == $nextPage.attr("id")){
117             return;
118         }
119 
120         //新页面入场
121         $currPage.addClass(outClass).on( animEndEventName, function() {
122             $currPage.off( animEndEventName );
123             endCurrPage = true;
124             if( endNextPage ) {
125                 onEndAnimation( $currPage, $nextPage );
126             }
127         } );
128 
129         //旧页面出场
130         $nextPage.addClass(inClass).on( animEndEventName, function() {
131             $nextPage.off( animEndEventName );
132             endNextPage = true;
133             if( endCurrPage ) {
134                 onEndAnimation( $currPage, $nextPage );
135             }
136         } );
137     }
138 
139     //所有动画都结束后
140     function onEndAnimation( $outpage, $inpage ) {
141         endCurrPage = false;
142         endNextPage = false;
143         //resetPage( $outpage, $inpage );
144         //isAnimating = false;
145         $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
146         $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
147     }  
148 
149     function getAnimationClass(animationType) {
150         switch(animationType) {
151             case 1:    
152                 outClass = 'pt-page-moveToLeft';
153                 inClass = 'pt-page-moveFromRight';
154                 break;
155             case 2:
156                 outClass = 'pt-page-moveToRight';
157                 inClass = 'pt-page-moveFromLeft';
158                 break;
159             case 3:
160                 outClass = 'pt-page-moveToTop';
161                 inClass = 'pt-page-moveFromBottom';
162                 break;
163             case 4:
164                 outClass = 'pt-page-moveToBottom';
165                 inClass = 'pt-page-moveFromTop';
166                 break;
167             case 5:
168                 outClass = 'pt-page-fade';
169                 inClass = 'pt-page-moveFromRight pt-page-ontop';
170                 break;
171             case 6:
172                 outClass = 'pt-page-fade';
173                 inClass = 'pt-page-moveFromLeft pt-page-ontop';
174                 break;
175             case 7:
176                 outClass = 'pt-page-fade';
177                 inClass = 'pt-page-moveFromBottom pt-page-ontop';
178                 break;
179             case 8:
180                 outClass = 'pt-page-fade';
181                 inClass = 'pt-page-moveFromTop pt-page-ontop';
182                 break;
183             case 9:
184                 outClass = 'pt-page-moveToLeftFade';
185                 inClass = 'pt-page-moveFromRightFade';
186                 break;
187             case 10:
188                 outClass = 'pt-page-moveToRightFade';
189                 inClass = 'pt-page-moveFromLeftFade';
190                 break;
191             case 11:
192                 outClass = 'pt-page-moveToTopFade';
193                 inClass = 'pt-page-moveFromBottomFade';
194                 break;
195             case 12:
196                 outClass = 'pt-page-moveToBottomFade';
197                 inClass = 'pt-page-moveFromTopFade';
198                 break;
199             case 13:
200                 outClass = 'pt-page-moveToLeftEasing pt-page-ontop';
201                 inClass = 'pt-page-moveFromRight';
202                 break;
203             case 14:
204                 outClass = 'pt-page-moveToRightEasing pt-page-ontop';
205                 inClass = 'pt-page-moveFromLeft';
206                 break;
207             case 15:
208                 outClass = 'pt-page-moveToTopEasing pt-page-ontop';
209                 inClass = 'pt-page-moveFromBottom';
210                 break;
211             case 16:
212                 outClass = 'pt-page-moveToBottomEasing pt-page-ontop';
213                 inClass = 'pt-page-moveFromTop';
214                 break;
215             case 17:
216                 outClass = 'pt-page-scaleDown';
217                 inClass = 'pt-page-moveFromRight pt-page-ontop';
218                 break;
219             case 18:
220                 outClass = 'pt-page-scaleDown';
221                 inClass = 'pt-page-moveFromLeft pt-page-ontop';
222                 break;
223             case 19:
224                 outClass = 'pt-page-scaleDown';
225                 inClass = 'pt-page-moveFromBottom pt-page-ontop';
226                 break;
227             case 20:
228                 outClass = 'pt-page-scaleDown';
229                 inClass = 'pt-page-moveFromTop pt-page-ontop';
230                 break;
231             case 21:
232                 outClass = 'pt-page-scaleDown';
233                 inClass = 'pt-page-scaleUpDown pt-page-delay300';
234                 break;
235             case 22:
236                 outClass = 'pt-page-scaleDownUp';
237                 inClass = 'pt-page-scaleUp pt-page-delay300';
238                 break;
239             case 23:
240                 outClass = 'pt-page-moveToLeft pt-page-ontop';
241                 inClass = 'pt-page-scaleUp';
242                 break;
243             case 24:
244                 outClass = 'pt-page-moveToRight pt-page-ontop';
245                 inClass = 'pt-page-scaleUp';
246                 break;
247             case 25:
248                 outClass = 'pt-page-moveToTop pt-page-ontop';
249                 inClass = 'pt-page-scaleUp';
250                 break;
251             case 26:
252                 outClass = 'pt-page-moveToBottom pt-page-ontop';
253                 inClass = 'pt-page-scaleUp';
254                 break;
255             case 27:
256                 outClass = 'pt-page-scaleDownCenter';
257                 inClass = 'pt-page-scaleUpCenter pt-page-delay400';
258                 break;
259             case 28:
260                 outClass = 'pt-page-rotateRightSideFirst';
261                 inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop';
262                 break;
263             case 29:
264                 outClass = 'pt-page-rotateLeftSideFirst';
265                 inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop';
266                 break;
267             case 30:
268                 outClass = 'pt-page-rotateTopSideFirst';
269                 inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop';
270                 break;
271             case 31:
272                 outClass = 'pt-page-rotateBottomSideFirst';
273                 inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop';
274                 break;
275             case 32:
276                 outClass = 'pt-page-flipOutRight';
277                 inClass = 'pt-page-flipInLeft pt-page-delay500';
278                 break;
279             case 33:
280                 outClass = 'pt-page-flipOutLeft';
281                 inClass = 'pt-page-flipInRight pt-page-delay500';
282                 break;
283             case 34:
284                 outClass = 'pt-page-flipOutTop';
285                 inClass = 'pt-page-flipInBottom pt-page-delay500';
286                 break;
287             case 35:
288                 outClass = 'pt-page-flipOutBottom';
289                 inClass = 'pt-page-flipInTop pt-page-delay500';
290                 break;
291             case 36:
292                 outClass = 'pt-page-rotateFall pt-page-ontop';
293                 inClass = 'pt-page-scaleUp';
294                 break;
295             case 37:
296                 outClass = 'pt-page-rotateOutNewspaper';
297                 inClass = 'pt-page-rotateInNewspaper pt-page-delay500';
298                 break;
299             case 38:
300                 outClass = 'pt-page-rotatePushLeft';
301                 inClass = 'pt-page-moveFromRight';
302                 break;
303             case 39:
304                 outClass = 'pt-page-rotatePushRight';
305                 inClass = 'pt-page-moveFromLeft';
306                 break;
307             case 40:
308                 outClass = 'pt-page-rotatePushTop';
309                 inClass = 'pt-page-moveFromBottom';
310                 break;
311             case 41:
312                 outClass = 'pt-page-rotatePushBottom';
313                 inClass = 'pt-page-moveFromTop';
314                 break;
315             case 42:
316                 outClass = 'pt-page-rotatePushLeft';
317                 inClass = 'pt-page-rotatePullRight pt-page-delay180';
318                 break;
319             case 43:
320                 outClass = 'pt-page-rotatePushRight';
321                 inClass = 'pt-page-rotatePullLeft pt-page-delay180';
322                 break;
323             case 44:
324                 outClass = 'pt-page-rotatePushTop';
325                 inClass = 'pt-page-rotatePullBottom pt-page-delay180';
326                 break;
327             case 45:
328                 outClass = 'pt-page-rotatePushBottom';
329                 inClass = 'pt-page-rotatePullTop pt-page-delay180';
330                 break;
331             case 46:
332                 outClass = 'pt-page-rotateFoldLeft';
333                 inClass = 'pt-page-moveFromRightFade';
334                 break;
335             case 47:
336                 outClass = 'pt-page-rotateFoldRight';
337                 inClass = 'pt-page-moveFromLeftFade';
338                 break;
339             case 48:
340                 outClass = 'pt-page-rotateFoldTop';
341                 inClass = 'pt-page-moveFromBottomFade';
342                 break;
343             case 49:
344                 outClass = 'pt-page-rotateFoldBottom';
345                 inClass = 'pt-page-moveFromTopFade';
346                 break;
347             case 50:
348                 outClass = 'pt-page-moveToRightFade';
349                 inClass = 'pt-page-rotateUnfoldLeft';
350                 break;
351             case 51:
352                 outClass = 'pt-page-moveToLeftFade';
353                 inClass = 'pt-page-rotateUnfoldRight';
354                 break;
355             case 52:
356                 outClass = 'pt-page-moveToBottomFade';
357                 inClass = 'pt-page-rotateUnfoldTop';
358                 break;
359             case 53:
360                 outClass = 'pt-page-moveToTopFade';
361                 inClass = 'pt-page-rotateUnfoldBottom';
362                 break;
363             case 54:
364                 outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
365                 inClass = 'pt-page-rotateRoomLeftIn';
366                 break;
367             case 55:
368                 outClass = 'pt-page-rotateRoomRightOut pt-page-ontop';
369                 inClass = 'pt-page-rotateRoomRightIn';
370                 break;
371             case 56:
372                 outClass = 'pt-page-rotateRoomTopOut pt-page-ontop';
373                 inClass = 'pt-page-rotateRoomTopIn';
374                 break;
375             case 57:
376                 outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop';
377                 inClass = 'pt-page-rotateRoomBottomIn';
378                 break;
379             case 58:
380                 outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
381                 inClass = 'pt-page-rotateCubeLeftIn';
382                 break;
383             case 59:
384                 outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
385                 inClass = 'pt-page-rotateCubeRightIn';
386                 break;
387             case 60:
388                 outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
389                 inClass = 'pt-page-rotateCubeTopIn';
390                 break;
391             case 61:
392                 outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
393                 inClass = 'pt-page-rotateCubeBottomIn';
394                 break;
395             case 62:
396                 outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
397                 inClass = 'pt-page-rotateCarouselLeftIn';
398                 break;
399             case 63:
400                 outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop';
401                 inClass = 'pt-page-rotateCarouselRightIn';
402                 break;
403             case 64:
404                 outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop';
405                 inClass = 'pt-page-rotateCarouselTopIn';
406                 break;
407             case 65:
408                 outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop';
409                 inClass = 'pt-page-rotateCarouselBottomIn';
410                 break;
411             case 66:
412                 outClass = 'pt-page-rotateSidesOut';
413                 inClass = 'pt-page-rotateSidesIn pt-page-delay200';
414                 break;
415             case 67:
416                 outClass = 'pt-page-rotateSlideOut';
417                 inClass = 'pt-page-rotateSlideIn';
418                 break;
419         }
420     }
421   </script>
422 </head>
423 <body>
424     <div id="viewsWrapper">
425         <div id="view1" class="pt-page">这个是页面1......</div>
426         <div id="view2" class="pt-page">这个是页面2......</div>
427         <div id="view3" class="pt-page">这个是页面3......</div>
428         <div id="view4" class="pt-page">这个是页面4......</div>
429     </div>
430     <br/>
431     <input type="button" onclick="changeView('#view1')" value="切换页面1"/>
432     <input type="button" onclick="changeView('#view2')" value="切换页面2"/>
433     <input type="button" onclick="changeView('#view3')" value="切换页面3"/>
434     <input type="button" onclick="changeView('#view4')" value="切换页面4"/>
435     <br/>
436     <br/>
437     <div id="radiosDiv"></div>
438 </body>
439 </html>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
java基础60 JavaScript字符串转换成数字(网页知识)
1、字符串转换成数字1<!doctypehtml2<html3<head4<metacharset"utf8"5<title字符串转换成数字练习</title6</head7<scripttype"text/javascrip
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这