zoukankan      html  css  js  c++  java
  • js——移动端js事件、zepto.js

    1. touchstart : 手指放到屏幕上时触发

    2. touchmove : 手指在屏幕上滑动时触发

    3. touched : 手指离开屏幕时触发

    4. touchcancel : 系统取消touch事件时触发,比较少用

    移动端一般有三种操作:点击、滑动、拖动,这三种操作一般是组合使用上面4个事件来完成。可以使用封装成熟的js库——zepto.js

    这个库有与juquery类似的api,专门针对移动端浏览器的轻量级js库。

    中文网站:http://www.css88.com/doc/zeptojs_api/

    可以定制: http://github.e-sites.nl/zeptobuilder/  

    tap元素类似click,但是比click快

    longtap 当一个元素被按超过750ms触发

    swipe swipeLeft swipeRight swipeDown 当元素被划过时触发(可以选择给定方向)

    不知道为什么,定制js那个网站上不去,所以我下了touch.js和fx.js,完成滑动和动画。

    一个滑动删除的例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0
        maximum-scale=1.0, minimum-scale=1.0">
        <script type="text/javascript" src="js/zepto.min.js"></script>
        <script type="text/javascript" src="js/touch.js"></script>
        <script type="text/javascript" src="js/fx.js"></script>
        <style type="text/css">
    
            .list{
                98%;
                list-style: none;
                /*background-color: aquamarine;*/
                margin:20px auto 0;
                padding:0;
            }
            .list li{
                border-bottom:1px solid #666;
                height:40px;
                line-height:40px;
                /*background-color: hotpink;*/
                position: relative;
                overflow:hidden;
            }
            .list li a{
                /*background-color: darksalmon;*/
                text-decoration:none;
                position:absolute;
                left:0;
            }
            .list li span{
                background-color:red;
                position: absolute;
                right:-60px;
                color:#fff;
                padding:0 10px;
            }
    
        </style>
        <script type="text/javascript">
            $(function () {
                $('.list li').swipeLeft(function () {
                    $(this).children('a').animate({left:-60});
                    $(this).children('span').animate({right:0});
                });
    
                $('.list li').swipeRight(function () {
                    $(this).children('a').animate({left:0});
                    $(this).children('span').animate({right:-60});
                });
            //    压扁再删除
                $('.list span').tap(function () {
                    $(this).parent().animate({height:0},function () {
                        $(this).remove();
                    })
                })
            })
        </script>
    </head>
    <body>
    <!--relative相对运动本身可以相对自己位置移动-->
        <ul class="list ">
            <li><a href="#" >新闻标题111111</a><span>删除</span></li>
            <li><a href="#">新闻标题2222222222</a><span>删除</span></li>
            <li><a href="#">新闻标题333333333</a><span>删除</span></li>
            <li><a href="#">新闻标题444444444</a><span>删除</span></li>
        </ul>
    </body>
    </html>

    效果展示:

  • 相关阅读:
    Android Media Playback 中的MediaPlayer的用法及注意事项(二)
    Android Media Playback 中的MediaPlayer的用法及注意事项(一)
    34. Search for a Range
    33. Search in Rotated Sorted Array
    32. Longest Valid Parentheses
    31. Next Permutation下一个排列
    30. Substring with Concatenation of All Words找出串联所有词的子串
    29. Divide Two Integers
    28. Implement strStr()子串匹配
    27. Remove Element
  • 原文地址:https://www.cnblogs.com/gaoquanquan/p/9227613.html
Copyright © 2011-2022 走看看