zeptojs

移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用

移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。

zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/

touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：

  • tap 元素tap的时候触发，此事件类似click，但是比click快。
  • longTap 当一个元素被按住超过750ms触发。
  • swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发。(可选择给定的方向) 
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>zepto-touch事件</title>
 9 
10     <style type="text/css">
11         .box{
12             width:300px;
13             height:300px;
14             background-color: gold;
15         }
16     </style>
17 
18     <script type="text/javascript" src="../js/zepto.min.js"></script>
19     <script type="text/javascript">
20 
21         $(function(){
22             $('.box').tap(function(){
23                 alert('tap');
24             })
25 
26             $('.box').click(function(){
27                 alert('click');
28             })
29 
30             $('.box').longTap(function(){
31                 alert('longTap');
32             })
33 
34             //swipe, swipeLeft, swipeRight, swipeUp, swipeDown 未生效，不知道为啥
35             $('.box').swipe(function(){
36 
37                 alert('swipe');
38             })
39 
40             $('.box').swipeLeft(function(){
41 
42                 alert('swipe left');
43             })
44 
45             $('.box').swipeRight(function(){
46 
47                 alert('swipe right');
48             })
49 
50             $('.box').swipeUp(function(){
51 
52                 alert('swipe up');
53             })
54 
55             $('.box').swipeDown(function(){
56 
57                 alert('swipe down');
58             })
59 
60         })
61     </script>
62 </head>
63 <body>
64     <div class="box"></div>
65 </body>
66 </html>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 6     <script type="text/javascript" src="../js/zepto.min.js"></script>
 7     <title>zepto touch</title>
 8     <style type="text/css">
 9         body,ul{margin:0;padding:0}
10         .list{
11             list-style:none;
12             margin:20px auto 0;
13             width:90%;
14         }
15 
16         .list li{
17             height:40px;
18             line-height:40px;
19             border-bottom:1px solid #ddd;
20             position:relative;
21             overflow:hidden;
22         }
23 
24         .list li a{
25             text-decoration:none;
26             color:#333;
27             position:absolute;
28             left:0
29         }
30 
31         .list li span{
32             position:absolute;
33             right:-60px;
34             background-color:red;
35             padding:0 10px;
36             color:#fff;
37         }
38     </style>
39     <script type="text/javascript">
40         $(function(){
41 
42             $('.list li').swipeLeft(function(){
43                 $(this).children('a').animate({left:-60});
44                 $(this).children('span').animate({right:0});
45 
46             });
47 
48             $('.list li').swipeRight(function(){
49                 $(this).children('a').animate({left:0});
50                 $(this).children('span').animate({right:-60});
51             })
52 
53             $('.list span').click(function(){
54                 $(this).parent().animate({height:0},function(){
55                     $(this).remove();
56                 })
57             });
58 
59         })
60 
61     </script>
62 </head>
63 <body>
64     <ul class="list">
65         <li><a href="#">新闻标题111111</a><span>删除</span></li>
66         <li><a href="#">新闻标题222222</a><span>删除</span></li>
67         <li><a href="#">新闻标题333333</a><span>删除</span></li>
68         <li><a href="#">新闻标题444444</a><span>删除</span></li>
69         <li><a href="#">新闻标题555555</a><span>删除</span></li>
70     </ul>
71 </body>
72 </html>

posted on 2020-01-01 20:36  cherry_ning  阅读(144)  评论(0)    收藏  举报

导航