zepto中的動畫+Ajax+touch模塊+zepto插件

時間  2020-03-27
標籤 zepto 動畫 ajax+touch ajax touch 模塊 插件 欄目 Ajax 简体版
原文   原文鏈接

zepto中的動畫php

zepto中不具有動畫模塊，須要單獨引入 fx.js 和 fx_methods.jscss

https://github.com/madrobby/zeptohtml

 

 

 

toggle 元素顯示與隱藏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>
        
    </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 隱藏git

<!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 切換淡入與淡出github

<!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 切換透明度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>
        
    </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動畫：json

對元素的屬性進行動畫後端

參數分別是：動畫的屬性、動畫持續時間、動畫完成後的回調app

<!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>

 

 

 

多屬性動畫：

<!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>

 

 

 

多屬性不一樣時進行動畫，而是執行完一個屬性再執行另外一個

將第二個動畫寫在第一個的回調裏

<!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：

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 參數分別是：一、url 二、傳遞給後端的參數 三、接收到數據的處理 四、預期接收到的數據的類型
        $.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，下載下來

 

 

 

<!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插件：

單插件：

<!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>

 

 

一組插件：

<!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>

 

 

將插件獨立出去，使用時再引入

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>

 

 

 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

<!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>

 

 

區別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

<!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>

 

 

區別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

<!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>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程