基于touchSwipe微信手机端微场景HTML5页面特效（适用于PC端）

这是适用于一个PC（电脑）端和手机端的下拉滑动切换网页的效果实现。

相关文章推荐： 基于Zepto的微信手机端微场景HTML5页面特效

代码

主要HTML代码

1
<div id="main" class="main">
2

3
    <img id="main_top" src="https://windcoder.com/img/top.png" />
4

5
    <section id='sec01' class="main" style="top:0%;background: red; ">
6
    </section>
7

8
    <section id='sec02' class="main" style="background: yellow;">
9
    </section>
10

11
    <section id='sec03' class="main" style="background: blue;">
12
    </section>
13
    <img id="main_bottom" src="https://windcoder.com/img/top.png" />
14
</div>

JS代码

1、动画不重复版

即动画过去，再滑动到该页面动画不显示。 [toggle hide=“yes” title=“动画不重复版” color=""]

1
<script type="text/javascript">
2

3
      var init = new Object();
4
      init.thisId = 0;
5
      var reg = new RegExp("(^|&)page=([^&]*)(&|$)");
6
      var r = window.location.search.substr(1).match(reg);
7
      if(r!=null){
8
        init.thisId = 2;
9
        $('#sec01,#sec02').css('top','-100%');
10
        $('#sec03').css('top','0');
11
      }
12
      $(window).load(function() {
13
        $('#loading').fadeOut();
14
        setTimeout(function() {
15
          $('#main').fadeIn();
16
        }, 1000);
17
        //car_sec01
18
        setTimeout(function(){
19
        $("#car_01").show();
20
        TweenLite.from($("#car_01"), 1, {x:"100",y:"10",scale:0.5,ease:Back.easeOut});
21
        TweenLite.to($("#car_01"), 1, {x:"10",y:"20",scale:1.0});
22
        },200);
23

24
      });
25

26

27
      /**
28
       * 滑动锁   true为解锁状态可以滑动
29
       *     false为锁定状态不能滑动
30
       */
31
      init.swipeLock = true;
32
      /*非必须
33
                        init.url = '与服务器数据交互的地址';
34
      init.openid = '';
35
                          */
36
      init.swipeSpeed = 0.8;
37
      init.height = document.documentElement.clientHeight;
38
      var tl = new TimelineLite();
39
      TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});
40
      init.body = function(){
41
      }
42
      $("#main").swipe({
43
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
44
          $('#sec011').html(distance);
45
          if(fingerCount>1)return;
46
          if(distance<=75)return;
47
          if(!init.swipeLock)return;
48

49
          if(direction=='up'){
50
            //向上滑
51
            if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
52
              $('#main .main').eq(init.thisId).css('top',75-distance+'px');
53
              $('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');
54
            } else{
55
              $('#main_bottom').css('height',distance-75);
56
              $('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));
57
            }
58
          };
59
          if(direction=='down'){
60
            //向下滑
61
            if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
62
              $('#main .main').eq(init.thisId).css('top',distance-75+'px');
63
              $('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');
64
            } else{
65
              $('#main_top').css('height',distance-75);
66
              $('#main_top').css('opacity',(distance-75)/(init.height*0.15));
67
            }
68
          };
69

70
        },
71
        swipe:function(event, direction, distance, duration, fingerCount) {
72
          if(fingerCount>1)return;
73
          if(distance<10)return;
74
          if(!init.swipeLock)return;
75
          if(direction=='up'){
76
            //init.swipeLock = false;
77
            if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
78
              try{
79
                TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});
80
                TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});
81
                init.thisId++;
82
                setTimeout(function(){
83
                  init.swipeLock = true;
84
                },init.swipeSpeed*1000);
85
              }catch(e){
86
                console.log(e);
87
              }
88
            }else{
89
              if (init.thisId==($('#main .main').length-1)) {
90
                TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});
91
              }
92
            };
93
          };
94
          if(direction=='down'){
95
            //init.swipeLock = false;
96
            if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
97
              try{
98
                init.swipeLock = false;
99
                TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});
100
                TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});
101
                init.thisId--;
102
                setTimeout(function(){
103
                  init.swipeLock = true;
104
                },init.swipeSpeed*1000);
105
              }catch(e){
106
                console.log(e);
107
              }
108
            }else{
109
              if(init.thisId==0){
110
                TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});
111
              }
112
            };
113
          };
114
        },
115
      });
116
      /**
117
       * 阻止触摸
118
      document.addEventListener('touchmove', function (event) {
119
        event.preventDefault();
120
      }, false);
121
       */
122

123

124
    </script>

[/toggle]

2、动画重复之简单版

这个是不需要在单页面对某一元素单独使用timeout延迟时的。 [toggle hide=“yes” title=“动画重复之简单版” color=""]

1
<script type="text/javascript">
2

3
      var init = new Object();
4

5
      $(window).load(function() {
6
        $('#loading').fadeOut();
7
        setTimeout(function() {
8
          $('#main').fadeIn();
9
        }, 6000);
10
      });
11

12

13
      /**
14
       * 滑动锁   true为解锁状态可以滑动
15
       *     false为锁定状态不能滑动
16
       */
17
      init.swipeLock = true;
18
      /*非必须
19
            init.url = '与服务器数据交互的地址';
20
      init.openid = '';
21
                          */
22
      init.swipeSpeed = 0.8;
23
      init.height = document.documentElement.clientHeight;
24
      var tl = new TimelineLite();
25
      TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});
26
      init.body = function(){
27
      }
28

29
      $("#main").swipe({
30
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
31
          $('#sec011').html(distance);
32
          if(fingerCount>1)return;
33
          if(distance<=75)return;
34
          if(!init.swipeLock)return;
35

36
          if(direction=='up'){
37
            //向上滑
38
            if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
39
              $('#main .main').eq(init.thisId).css('top',75-distance+'px');
40
              $('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');
41
              $('#main .main').eq(init.thisId+1).show();
42
            } else{
43
              $('#main_bottom').css('height',distance-75);
44
              $('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));
45
            }
46
          };
47
          if(direction=='down'){
48
            //向下滑
49
            if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
50
              $('#main .main').eq(init.thisId).css('top',distance-75+'px');
51
              $('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');
52
              $('#main .main').eq(init.thisId-1).show();
53
            } else{
54
              $('#main_top').css('height',distance-75);
55
              $('#main_top').css('opacity',(distance-75)/(init.height*0.15));
56
            }
57
          };
58

59
        },
60
        swipe:function(event, direction, distance, duration, fingerCount) {
61
          if(fingerCount>1)return;
62
          if(distance<10)return;
63
          if(!init.swipeLock)return;
64

65
          if(direction=='up'){
66

67
            if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
68
              try{
69
                TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});
70
                TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});
71

72
                init.thisId++;
73
                setTimeout(function(){
74
                  $('#main .main').eq(init.thisId-1).hide();
75
                  init.swipeLock = true;
76
                },init.swipeSpeed*1000);
77
              }catch(e){
78
                console.log(e);
79
              }
80
            }else{
81
              if (init.thisId==($('#main .main').length-1)) {
82
                TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});
83
              }
84
            };
85
          };
86
          if(direction=='down'){
87
            //init.swipeLock = false;
88
            if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
89
              try{
90
                init.swipeLock = false;
91
                TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});
92
                TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});
93
                init.thisId--;
94
                setTimeout(function(){
95
                  $('#main .main').eq(init.thisId+1).hide();
96
                  init.swipeLock = true;
97
                },init.swipeSpeed*1000);
98
              }catch(e){
99
                console.log(e);
100
              }
101
            }else{
102
              if(init.thisId==0){
103
                TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});
104
              }
105
            };
106
          };
107
        },
108
      });
109
      /**
110
       * 阻止触摸
111
      document.addEventListener('touchmove', function (event) {
112
        event.preventDefault();
113
      }, false);
114
       */
115

116

117
    </script>

[/toggle]

2、动画重复之复杂版

这个是可以对单页面元素进行各种自定义的 [toggle hide=“yes” title=“动画重复之复杂版” color=""]

1
<script type="text/javascript">
2

3
      var init = new Object();
4

5
      $(window).load(function() {
6
        $('#loading').fadeOut();
7
        setTimeout(function() {
8
          $('#main').fadeIn();
9
        }, 6000);
10
      });
11

12
      /**
13
       * 滑动锁   true为解锁状态可以滑动
14
       *     false为锁定状态不能滑动
15
       */
16
      init.swipeLock = true;
17
      /*非必须
18
            init.url = '与服务器数据交互的地址';
19
      init.openid = '';
20
            */
21
      init.swipeSpeed = 0.8;
22
      init.height = document.documentElement.clientHeight;
23
      var tl = new TimelineLite();
24
      TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});
25
      init.body = function(){
26
      }
27
      init.sec01 = function(){
28
        $('#sec01_jiantou').hide();
29
        clearTimeout(init.sec01jTimeout);
30
        init.sec01jTimeout = setTimeout(function(){
31
          $('#sec01_jiantou').show();
32
        },6000);
33
      }
34
      init.sec02 = function(){
35
        $('#sec02_jiantou').hide();
36
        clearTimeout(init.sec02jTimeout);
37
        init.sec02jTimeout = setTimeout(function(){
38
          $('#sec02_jiantou').show();
39
        },6000);
40
      }
41
      init.sec03 = function(){
42
        $('#sec03_jiantou').hide();
43
        clearTimeout(init.sec03jTimeout);
44
        init.sec03jTimeout = setTimeout(function(){
45
          $('#sec03_jiantou').show();
46
        },5000);
47
      }
48
      init.sec04 = function(){
49
        $('#sec04_jiantou').hide();
50
        clearTimeout(init.sec04jTimeout);
51
        init.sec04jTimeout = setTimeout(function(){
52
          $('#sec04_jiantou').show();
53
        },4500);
54
      }
55
      init.sec05 = function(){
56
        $('#sec05_jiantou').hide();
57
        clearTimeout(init.sec05jTimeout);
58
        init.sec05jTimeout = setTimeout(function(){
59
          $('#sec05_jiantou').show();
60
        },4500);
61
      }
62
      init.sec06 = function(){
63
        $('#sec06_fengyu').hide();
64
        $('#sec06_jiantou').hide();
65
        clearTimeout(init.sec06Timeout);
66
        init.sec06Timeout = setTimeout(function(){
67
          $('#sec06_fengyu').show();
68
        },3000);
69
        clearTimeout(init.sec06jTimeout);
70
        init.sec06jTimeout = setTimeout(function(){
71
          $('#sec06_jiantou').show();
72
        },4000);
73
      }
74
      init.sec07 = function(){
75
          $('#sec07_jia').hide();
76
          $('#sec07_jiantou').hide();
77
        clearTimeout(init.sec07Timeout);
78
        init.sec07Timeout = setTimeout(function(){
79
        $("#sec07_jia").show();
80
        TweenLite.from($("#sec07_jia"), 1, {scale:2.0, opacity:2.3});
81
        TweenLite.to($("#sec07_jia"), 1, {scale:1.0, opacity:1.0});
82
        },1000);
83
        clearTimeout(init.sec07jTimeout);
84
        init.sec07jTimeout = setTimeout(function(){
85
          $('#sec07_jiantou').show();
86
        },6000);
87
      }
88
      init.sec08 = function(){
89
        $('#sec08_baorong').hide();
90
        $('#sec08_guangkuo').hide();
91
        $('#sec08_renxing').hide();
92
        $('#sec08_zhuizhu').hide();
93
        $('#sec08_yanxu').hide();
94
        $('#sec08_jiating').hide();
95
        $('#sec08_jiantou').hide();
96

97
        /*
98
        *进入
99
        */
100
        clearTimeout(init.sec08_baorongInTimeout);
101
        init.sec08_baorongInTimeout = setTimeout(function(){
102
          $('#sec08_bao').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
103
          $('#sec08_rongShang').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
104
          $('#sec08_rongXia').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
105
          $('#sec08_baorong').show();
106
          $('#sec08_bao').show();
107
          $('#sec08_rongXia').show();
108
        },1000);
109
        clearTimeout(init.sec08_zhuizhuInTimeout);
110
        init.sec08_zhuizhuInTimeout = setTimeout(function(){
111
          $('#sec08_guangkuo').hide();
112
          $('#sec08_zhuizhu').show();
113

114
          $('#sec08_bao').hide();
115
          $('#sec08_rongXia').hide();
116
          $('#sec08_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"0.2"});
117
          $('#sec08_zhui').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
118
          $('#sec08_zhuzuo').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
119
          $('#sec08_zhuyou').css({"top": "47%","left":" 15%","width":"initial","margin":"0 auto"});
120
          $('#sec08_zhui').show();
121
          $('#sec08_zhuzuo').show();
122
          $('#sec08_zhuyou').show();
123
        },3000);
124

125
        clearTimeout(init.sec08_guangkuoInTimeout);
126
        init.sec08_guangkuoInTimeout = setTimeout(function(){
127
          $('#sec08_guangkuo').show();
128
          $('#sec08_zhui').hide();
129
          $('#sec08_zhuzuo').hide();
130
          $('#sec08_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"0.2"});
131
          var sec08_guangall={top:"10%",left:"32.5%",width:"initial"};
132
          $('#sec08_guang').css(sec08_guangall);
133
          $('#sec08_guangkuang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
134
          $('#sec08_kuo').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
135
          $('#sec08_guang').show();
136
          $('#sec08_guangkuang').show();
137
          $('#sec08_kuo').show();
138
        },5000);
139
        clearTimeout(init.sec08_yanxuInTimeout);
140
        init.sec08_yanxuInTimeout = setTimeout(function(){
141
          $('#sec08_yanxu').show();
142
          $('#sec08_guangkuang').hide();
143
          $('#sec08_kuo').hide();
144
          $('#sec08_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"0.2"});
145
          $('#sec08_yanzuo').css({"top": "16.5%","left": "7%","width":"initial","margin":"0 auto"});
146
          $('#sec08_yanyou').css({"top": "10%","left":"6%","width":"19.5%","width":"initial","margin":"0 auto"});
147
          $('#sec08_xu').css({"top": "45%","left":" 6%","width":" 19.5%","width":"initial","margin":"0 auto"});
148
          $('#sec08_yanzuo').show();
149
          $('#sec08_yanyou').show();
150
          $('#sec08_xu').show();
151
        },7000);
152
        clearTimeout(init.sec08_renxingInTimeout);
153
        init.sec08_renxingInTimeout = setTimeout(function(){
154
          $('#sec08_renxing').show();
155
          $('#sec08_yanyou').hide();
156
          $('#sec08_xu').hide();
157
          $('#sec08_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"0.2"});
158

159
          $('#sec08_renyou').css({"top": "14%","left": "22。5%","width":"initial","margin":"0 auto"});
160
          $('#sec08_renzuo').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
161
          $('#sec08_xing').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
162
          $('#sec08_renzuo').show();
163
          $('#sec08_renyou').show();
164
          $('#sec08_xing').show();
165
        },9000);
166
        /*  */
167

168
        clearTimeout(init.sec08_chongzuTimeout);
169
        init.sec08_chongzuTimeout = setTimeout(function(){
170
          $('#sec08_renzuo').hide();
171
          $('#sec08_xing').hide();
172
          $('#sec08_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"1"});
173
          $('#sec08_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"1"});
174
          $('#sec08_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"1"});
175
          $('#sec08_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"1"});
176
          $('#sec08_renyou').css({"top": "55%","left": "16%","width":"14%","margin":"0 auto","opacity":"1"});
177
          $('#sec08_jiating').show();
178
          $('#sec08_jiantou').show();
179
        },10000);
180
      }
181
      init.sec09 = function(){
182
        $('#sec09_car').show();
183
        $('#sec09_cars').show();
184
        $('#sec09_map').hide();
185
        $('#sec09_zhanwei').hide();
186
        $("#sec09_car").click(function() {
187
           $('#sec09_cars').hide();
188
          clearTimeout(init.sec09_carTimeout);
189
          init.sec09_carTimeout = setTimeout(function(){
190
          $('#sec09_car').hide();
191
          $('#sec09_map').show();
192
          $('#sec09_zhanwei').show();
193
          },1);
194
        });
195
        $("#sec09_cars").click(function() {
196
           $('#sec09_cars').hide();
197
          clearTimeout(init.sec09_carsTimeout);
198
          init.sec09_carsTimeout = setTimeout(function(){
199
          $('#sec09_car').hide();
200
          $('#sec09_map').show();
201
          $('#sec09_zhanwei').show();
202
          },1);
203
        });
204
      }
205
      $("#main").swipe({
206
        swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
207
          $('#sec011').html(distance);
208
          if(fingerCount>1)return;
209
          if(distance<=75)return;
210
          if(!init.swipeLock)return;
211

212
          if(direction=='up'){
213
            //向上滑
214
            if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
215
              $('#main .main').eq(init.thisId).css('top',75-distance+'px');
216
              $('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');
217
              $('#main .main').eq(init.thisId+1).show();
218
            } else{
219
              $('#main_bottom').css('height',distance-75);
220
              $('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));
221
            }
222
          };
223
          if(direction=='down'){
224
            //向下滑
225
            if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
226
              $('#main .main').eq(init.thisId).css('top',distance-75+'px');
227
              $('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');
228
              $('#main .main').eq(init.thisId-1).show();
229
            } else{
230
              $('#main_top').css('height',distance-75);
231
              $('#main_top').css('opacity',(distance-75)/(init.height*0.15));
232
            }
233
          };
234

235
        },
236
        swipe:function(event, direction, distance, duration, fingerCount) {
237
          if(fingerCount>1)return;
238
          if(distance<10)return;
239
          if(!init.swipeLock)return;
240

241
          if(direction=='up'){
242

243
            if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
244
              try{
245
              //init.swipeLock = false;
246
              if (init.thisId == 0) {
247
                  init.sec02();
248
                }
249
                if (init.thisId == 1) {
250
                  init.sec03();
251
                }
252
                if (init.thisId == 2) {
253
                  init.sec04();
254
                }
255
                if (init.thisId == 3) {
256
                  init.sec05();
257
                }
258
                if (init.thisId == 4) {
259
                  init.sec06();
260
                }
261
                if (init.thisId == 5) {
262
                  init.sec07();
263
                }
264
                if (init.thisId == 6) {
265
                  init.sec08();
266
                }
267
                if (init.thisId == 7) {
268
                  init.sec09();
269
                }
270

271

272
                TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});
273
                TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});
274

275
                init.thisId++;
276
                setTimeout(function(){
277
                  $('#main .main').eq(init.thisId-1).hide();
278
                  init.swipeLock = true;
279
                },init.swipeSpeed*1000);
280
              }catch(e){
281
                console.log(e);
282
              }
283
            }else{
284
              if (init.thisId==($('#main .main').length-1)) {
285
                TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});
286
              }
287
            };
288
          };
289
          if(direction=='down'){
290
            //init.swipeLock = false;
291
            if ((init.thisId>0) && (init.thisId<$('#main .main').length)) {
292
              try{
293
                init.swipeLock = false;
294

295
                if (init.thisId == 1) {
296
                  init.sec01();
297
                }
298
                if (init.thisId == 2) {
299
                  init.sec02();
300
                }
301
                if (init.thisId == 3) {
302
                  init.sec03();
303
                }
304
                if (init.thisId == 4) {
305
                  init.sec04();
306
                }
307
                if (init.thisId == 5) {
308
                  init.sec05();
309
                }
310
                if (init.thisId == 6) {
311
                  init.sec06();
312
                }
313
                if (init.thisId == 7) {
314
                  init.sec07();
315
                }
316
                if (init.thisId == 8) {
317
                  init.sec08();
318
                }
319
                if (init.thisId == 9) {
320
                  init.sec09();
321
                }
322

323
                TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});
324
                TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});
325
                init.thisId--;
326
                setTimeout(function(){
327
                  $('#main .main').eq(init.thisId+1).hide();
328
                  init.swipeLock = true;
329
                },init.swipeSpeed*1000);
330
              }catch(e){
331
                console.log(e);
332
              }
333
            }else{
334
              if(init.thisId==0){
335
                TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});
336
              }
337
            };
338
          };
339
        },
340
      });
341
      /**
342
       * 阻止触摸
343
      document.addEventListener('touchmove', function (event) {
344
        event.preventDefault();
345
      }, false);
346
       */
347

348

349
    </script>

[/toggle]

CSS动画效果基础代码

1
//0秒就开始，持续12.6秒完成，1是只出现一次
2
-webkit-animation: FadeIn 12.6s ease 0.0s 1 forwards;
3
//持续循环，每次循环时间为1.2秒
4
-webkit-animation: FadeInB ease-in-out 1.2s infinite;

基于touchSwipe微信手机端微场景HTML5页面特效（适用于PC端）

代码

主要HTML代码

JS代码

1、动画不重复版

2、动画重复之简单版

2、动画重复之复杂版

CSS动画效果基础代码

支持一下

评论