欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

zepto中的动画+Ajax+touch模块+zepto插件

程序员文章站 2022-03-10 16:23:01
zepto中的动画 zepto中不具备动画模块，需要单独引入 fx.js 和 fx_methods.js https://github.com/madrobby/zepto toggle 元素显示与隐藏

zepto中的动画

zepto中不具备动画模块，需要单独引入 fx.js 和 fx_methods.js

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 

toggle 元素显示与隐藏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div>box</div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("div").toggle();
            $("div").toggle("slow");
            $("div").toggle(3000);
        })
    </script>
</body>
</html>

 

show 显示  hide 隐藏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div>box</div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("div").hide();
            $("div").hide("slow");
            $("div").hide(3000);

            $("div").show();
            $("div").show("slow");
            $("div").show(3000);
        })
    </script>
</body>
</html>

 

fadein 淡入  fadeout 淡出  fadetoggle 切换淡入与淡出

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div>box</div>
    <span>span</span>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("div").fadein();
            $("div").fadein("slow");
            $("div").fadein("fast");
            $("div").fadein(3000);

            $("div").fadeout();
            $("div").fadeout("slow");
            $("div").fadeout("fast");
            $("div").fadeout(3000);

            $("div").fadetoggle();
            $("div").fadetoggle("slow");
            $("div").fadetoggle("fast");
            $("div").fadetoggle(3000);

            //控制多个元素
            $("div,span").fadetoggle();
            $("div,span").fadetoggle("slow");
            $("div,span").fadetoggle("fast");
            $("div,span").fadetoggle(3000);
        })
    </script>
</body>
</html>

 

fadeto 切换透明度

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        
    </style>
</head>
<body>
    <div>box</div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("div").fadeto("slow",.3);
            $("div").fadeto("fast",.3);
            $("div").fadeto(3000,.3);
        })
    </script>
</body>
</html>

 

animate动画：

对元素的属性进行动画

参数分别是：动画的属性、动画持续时间、动画完成后的回调

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("#div").animate({"left":300},3000,function(){
                alert("finished");
            })
        })
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 

多属性动画：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("#div").animate({"left":300,"top":300},3000,function(){
                alert("finished");
            })
        })
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 

多属性不同时进行动画，而是执行完一个属性再执行另一个

将第二个动画写在第一个的回调里

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>
    <script src="js/fx.js"></script><!-- 动画模块 -->
    <script src="js/fx_methods.js"></script>

    <script>
        
        $("#btn").click(function(){
            $("#div").animate({"left":300},3000,function(){
                $(this).animate({"top":300},3000,function(){
                    alert("finished");
                })                
            })
        })
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 

zepto中的ajax：

get  post  ajax

get 和 post 属于 ajax 的一种简写方式

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:50px;height:50px;background:pink;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div"></div>
    <button id="btn">点我</button>

    <script src="js/zepto.min.js"></script>

    <script>
        //原生ajax请求
        function ajax(){
            var xmlhttpreq=null;

            if(window.activexobject){
                //ie5,6
                xmlhttpreq=new activexobject("microsoft.xmlhttp");
            }else{
                xmlhttpreq=new xmlhttprequest();
            }

            xmlhttpreq.open("get","test.php",true);

            xmlhttpreq.onreadystatechange=function(){
                if(xmlhttpreq.readystate==4){//请求完毕
                    if(xmlhttpreq.status==200){//获取到数据
                        console.log("获取数据："+xmlhttpreq.responsetext);
                    }
                }
            }

            xmlhttpreq.send(null);

        }


        //zepto  ajax
        //get 参数分别是：1、url 2、传递给后端的参数 3、接收到数据的处理 4、预期接收到的数据的类型
        $.get("test.php",[data],function(res){
            $(document.body).append(res);
        },[datatype]);

        //post 参数与get相同（参数2和4不是必须，参数4一般并不需要填写）
        $.post("test.php",{id:5},function(res){
            $(document.body).append(res);
        },"json");

        //ajax
        $.ajax({
            type:"get",
            url:"test.php",
            data:{id:5},
            datatype:"json",
            success:function(res){
                console.log(res);
            },
            error:function(){
                console.log("error");
            }
        })

    </script>
</body>
</html>

 

zepto中的touch模块：

找到touch.js，下载下来

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:50px;height:50px;background:#cce;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div"></div>

    <script src="js/zepto.min.js"></script>
    <script src="js/touch.js"></script>

    <script>
        //阻止默认行为
        $("#div").on("touchmove",function(e){ e.preventdefault();})

        //各种touch事件
        $("#div").tap(function(){
            console.log("tap");//点击
        }).singletap(function(){
            console.log("singletap");//单击
        }).longtap(function(){
            console.log("longtap");//长按
        }).doubletap(function(){
            console.log("doubletap");//双击
        }).swipe(function(){
            console.log("swipe");//快速划动
        }).swipeleft(function(){
            console.log("swipeleft");//快速右划
        }).swiperight(function(){
            console.log("swiperight");//快速左划
        }).swipeup(function(){
            console.log("swipeup");//快速上划
        }).swipedown(function(){
            console.log("swipedown");//快速下划
        });

    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 

zepto插件：

单插件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div">我是div</div>

    <script src="js/zepto.min.js"></script>
    <script src="js/zepto.fullpage.js"></script>

    <script>
        //插件的写法
        ;(function($){
            $.fn.myfn=function(options){

                //对象合并，相同属性后面的覆盖前面的
                var options=$.extend({
                    //设置默认值
                    "color":"orange",
                    "fontsize":"14px"
                },options);

                this.css({"color":options.color,"fontsize":options.fontsize});

                return this;//方便链式调用
            }
        })(zepto);

        //使用插件
        $("#div").myfn({
            fontsize:"20px"
        }).html("可以链式调用啦");
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

一组插件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div">我是div</div>

    <script src="js/zepto.min.js"></script>
    <script src="js/zepto.fullpage.js"></script>

    <script>
        //插件的写法
        ;(function($){
            //一组插件
            $.extend($.fn,{
                myfn:function(options){
                    var options=$.extend({
                        //设置默认值
                        "color":"orange",
                        "fontsize":"14px"
                    },options);
                    this.css({"color":options.color,"fontsize":options.fontsize});
                    return this;//方便链式调用
                },
                myfn2:function(options){
                    var options=$.extend({
                        "backgroundcolor":"lightgreen"
                    },options);
                    this.css({"backgroundcolor":options.backgroundcolor});
                    return this;
                }

            });
        })(zepto);

        //使用插件
        $("#div").myfn({
            fontsize:"20px"
        }).myfn2();
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

将插件独立出去，使用时再引入

myfn.js

//插件的写法
;(function($){
    //一组插件
    $.extend($.fn,{
        myfn:function(options){
            var options=$.extend({
                //设置默认值
                "color":"orange",
                "fontsize":"14px"
            },options);
            this.css({"color":options.color,"fontsize":options.fontsize});
            return this;//方便链式调用
        },
        myfn2:function(options){
            var options=$.extend({
                "backgroundcolor":"lightgreen"
            },options);
            this.css({"backgroundcolor":options.backgroundcolor});
            return this;
        }

    });
})(zepto);

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div id="div">我是div</div>

    <script src="js/zepto.min.js"></script>
    <script src="js/myfn.js"></script><!-- 引入插件 -->

    <script>
        //使用插件
        $("#div").myfn({
            fontsize:"20px"
        }).myfn2({
            backgroundcolor:"lightblue"
        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

 jquery和zepto的区别：

zepto是jquery的精简版，主要针对移动端（因此不会去兼容ie）

部分api实现方式不同

 

区别1：添加id时，jquery不会生效，而zepto会生效

jquery

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div class="div">div</div>
    <div class="hide">hide</div>

    <script src="js/jquery.min.js"></script>
    <!-- <script src="js/zepto.min.js"></script> -->
    <script>
        $(function(){
            //区别1：添加id时，jquery不会生效，而zepto会生效
            var $new=$("<div>new</div>",{
                id:"new"
            });
            $new.appendto($("body"));

            //区别2：offset()
            //
            //区别3：zepto无法获取隐藏的元素的宽高，而jquery可以

        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

zepto

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        #div{width:100px;height:100px;background:#cce;position:absolute;top:0;left:0;}
        #btn{position: absolute;top:50px;left:0;}
    </style>
</head>
<body>
    <div class="div">div</div>
    <div class="hide">hide</div>

    <script src="js/zepto.min.js"></script>
    <script>
        $(function(){
            //区别1：添加id时，jquery不会生效，而zepto会生效
            var $new=$("<div>new</div>",{
                id:"new"
            });
            $new.appendto($("body"));

        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

区别2：

区别2：offset()输出元素的定位
jquery返回元素的top和left
zepto返回元素的top、left、width、height

jquery

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
    </style>
</head>
<body>
    <div class="div">div</div>
    <div class="hide">hide</div>

    <script src="js/jquery.min.js"></script>
    <!-- <script src="js/zepto.min.js"></script> -->
    <script>
        $(function(){
            //区别2：offset()输出元素的定位
            //jquery返回元素的top和left
            //zepto返回元素的top、left、width、height
            console.log($("div").offset());

        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

zepto

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
    </style>
</head>
<body>
    <div class="div">div</div>
    <div class="hide">hide</div>

    <!-- <script src="js/jquery.min.js"></script> -->
    <script src="js/zepto.min.js"></script>
    <script>
        $(function(){
            //区别2：offset()输出元素的定位
            //jquery返回元素的top和left
            //zepto返回元素的top、left、width、height
            console.log($("div").offset());
            
            //区别3：zepto无法获取隐藏的元素的宽高，而jquery可以

        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

区别3：添加id时，jquery不会生效，而zepto会生效

jquery

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
        .hide{display: none;}
    </style>
</head>
<body>
    <div class="div">div</div>
    <div class="hide">hide</div>

    <script src="js/jquery.min.js"></script>
    <!-- <script src="js/zepto.min.js"></script> -->
    <script>
        $(function(){
            //区别3：zepto无法获取隐藏的元素的宽高，而jquery可以
            console.log($(".hide").width());
        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

 

zepto

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zepto</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <style>
        div{width:100px;height:100px;background:#cce;margin-bottom:20px;}
        .hide{display: none;}
    </style>
</head>
<body>
    <div class="div">div</div>
    <div class="hide">hide</div>

    <!-- <script src="js/jquery.min.js"></script> -->
    <script src="js/zepto.min.js"></script>
    <script>
        $(function(){
            //区别3：zepto无法获取隐藏的元素的宽高，而jquery可以
            console.log($(".hide").width());
        });
    </script>
</body>
</html>

zepto中的动画+Ajax+touch模块+zepto插件

 

上一篇： MPlayer 音乐播放器项目讲解

下一篇： 在Qt中编写代码让控件位置大小随窗口大小改变而改变

推荐阅读