zepto

時間 2019-11-08

標籤 zepto 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         
 8         <!--
 9             zepto是移動端輕量級的類庫，方法幾乎跟jquery一致。可是比jquery更小，而且分了模塊，能夠按需加載。
10             //zepto根據移動端的touch事件，封裝了：
11             tap  輕觸事件（有300ms的延遲）
12             singleTap  輕觸事件（沒有300ms的延遲，手指離開當即觸發）
13             doubleTap  雙擊事件
14             longTap    長按事件
15             swipe   滑動事件  ---  swipeLeft, swipeRight, swipeUp, swipeDown
16             
17             
18             
19             類庫（jquery，zepto）：封裝js，經過操做的api（方法和屬性）
20             項目框架（angular，vue，react）：能夠搭建項目的結構，而且提供一系列的方法，屬性，模塊完成這個項目
21             UI框架（bootstrap，mint UI）:提供能夠完成項目界面的效果樣式和標籤組件
22             插件：不能完成整個項目，能夠完成一個功能。
23         -->
24         <style>
25             body{touch-action: none;}
26             .box1{
27                 width: 300px;
28                 height: 300px;
29                 background: red;
30             }
31         </style>
32         
33         <script src="zepto.dev.js"></script>
34     </head>
35     <body>
36         
37         <div class="box1">tongjing1</div>
38         <div class="box">tongjing2</div>
39         <div class="box">tongjing3</div>
40         <div class="box">tongjing4</div>
41         <div class="box">tongjing5</div>
42         
43         
44         <script>
45             
46             var arr = $('.box')
47             
48             $('.box1').on('tap', function(){
49                 console.log('tap');
50             })
51             
52             
53 //            $('.box1').on('singleTap', function(){
54 //                console.log('singleTap');
55 //            })
56             
57 //            $('.box1').on('doubleTap', function(){
58 //                console.log('doubleTap');
59 //            })
60 
61             $('.box1').on('swipe', function(){
62                 console.log('swipe');
63             })
64             
65             $('.box1').on('swipeLeft', function(){
66                 console.log('swipeLeft');
67             })
68             
69             $('.box1').on('swipeRight', function(){
70                 console.log('swipeRight');
71             })
72             
73             $('.box1').on('swipeUp', function(){
74                 console.log('swipeUp');
75             })
76             
77             $('.box1').on('swipeDown', function(){
78                 console.log('swipeDown');
79             })
80 
81 
82             
83         </script>
84         
85     </body>
86 </html>

1. zepto
2. Zepto
3. zepto jquery和zepto的區別?
4. Zepto,Zepto API 中文版,Zepto 中文手冊,Zepto API,Zepto API 中文版,Zepto 中文手冊,Zepto API 1.0, Zepto API 1.0 中文版,Z
5. zepto - scrollLeft
6. zepto - reduce
7. zepto - toggleClass
8. zepto callback
9. zepto - push
10. zepto - toggle
更多相關文章...

相關標籤/搜索

zepto

bootstrap+zepto+gitbook

zepto學習筆記01

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。