2. 程式人生 > >學習Js（1）-使用Jquery實現滑動切換效果

學習Js（1）-使用Jquery實現滑動切換效果

阿新 • • 發佈：2019-02-06

1.前言雜談：
對於Javascript 是從大二就開始接觸了，那個時候剛開始接觸到web開發。在公司實習期間，由於什麼都不會，帶我師兄就讓我在百度傳課上看了一週的傳智播客的教學視訊，這才有點底子，可以寫寫正則，做表單驗證什麼的。到現在剛參加工作的時候，一直不太想從事前端方面的工作，覺得這個應該由公司前端來完成，我是用C#的，讓我能專注的寫後臺就好。
但現實比較那啥，領導要求啊，沒辦法，只能寫了。在接觸了一段時間後，也著實加深了自己對整個web開發的理解，從HTML到CSS，再到JS，雖然簡單，上手容易，但這是針對學習門檻上的。任何一個需要多人蔘與才能完成的網站專案，都需要對這三門語言進行深入理解才行。如：只有理解CSS的樣式繼承層次，對HTML程式碼結構做好規劃，才能夠良性的對網站中的頁面進行增添刪除，不至於顯得過於臃腫，也不會造成修改了某區域性的樣式之後，造成網站中其餘頁面錯位等情況。

2.需求說明：
網站首頁的廣告位，要增添左右滑動效果；
方便以後對廣告位進行擴充套件；
方便移植到其它需要滑動的區域中。

示例下載1

3.效果展示圖：
這裡寫圖片描述

4.重要程式碼展示及說明：

/*HTML程式碼結構*/
<body>
    <div class="cooperation">
        <div class="ico" >/*圖示*/
            <span id="icoL" ></span>
            <span id="icoR" ></span>
        </div
 
>
        <!--網頁中的展示區域，這裡注意style中的三個屬性是必須的，如果滑動效果出現了彈跳或是不流暢等現象，可以對width屬性進行微調-->
        <ul class="img_display" style="overflow:hidden;white-space:nowrap;width: 1175px;" >

            <li ><img src="1.png"></li>
            <li ><img src="2.png"></li>
 

            <li ><img src="3.png"></li>
            <li ><img src="4.png"></li>

        </ul>
        <!--這裡是隱藏區域，用來存放未展示出來的圖片-->
        <!--這裡有個問題就是，每次頁面載入的時候，隱藏區域的圖片未被展示出來，但仍然請求了伺服器的資源，這樣不太好，但一時也沒想到好的方法來儲存隱藏區域的資訊-->
        <ul class="img_hidden" style="display:none;">
            <li><img  src="5.png"></li>
            <li ><img src="6.png"></li>
            <li ><img src="7.png"></li>
            <li ><img src="8.png"></li>
        </ul>    
        <div class="clear"></div>
    </div>
</body>

下面是JS的程式碼展示：
這裡主要使用了Jquery中的animate函式。簡單來說這個函式是在指定時間內，將指定的元素逐漸移動到某一位置。animate用法參考

需要注意的是，指定函式位置時可以使用left，right，top，bottom，也可以使用marginLeft，marginTop等，區別在於前者需要HTML元素本身的position設定成為absolute即絕對定位，後者則沒什麼要求，都可以使用。

這裡其實涉及到CSS定位的一個層次問題，筆者在這方面沒有什麼瞭解，就不過多解釋了。

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $("#icoL").bind("click",function(){
        MoveLeft(".img_display",4,"li",".img_hidden");
    });
    $("#icoR").bind("click",function(){
        MoveRight(".img_display",4,"li",".img_hidden");
    });

//往左滑動
//displayRegion 顯示區域
//displayNum 顯示區域中，顯示元素個數
//elementName 顯示元素標識
//HiddenRegion 隱藏區域
function MoveLeft(displayRegion, displayNum, elementName, HiddenRegion) {
    //防止重複點選
    if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
        return;
    }

    //算滑動距離
    var width = parseInt($($(displayRegion)[0]).css("width"));
    var marginLeft = 0;
    $(displayRegion + " " + elementName).each(function (index) {
        if (index > 0) {
            //除去displayRegion中第一個元素的marginLeft，因為滑動是以第一個元素本身的左邊為基準開始滑動的。
            marginLeft += parseInt($(this).css("marginLeft"));
        }
    });

    //原始滑動距離
    var distance = (width - marginLeft) / displayNum;

    //由於在滑動結束時，會移除滑動到螢幕之外的元素，所以得考慮元素移除後,如何恢復原始的佈局；
    //令滑動前，displayRegion中第一個元素的marginLeft為a，第二個元素的為b；
    //若a==0，滑動距離應加上b;若a<>0,則無需加上b
    if (parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft")) == 0) {
        distance += parseInt($($(displayRegion + " " + elementName)[1]).css("marginLeft"));
    }

    //從HiddenRegion中取出第一個元素，填補到displayRegion得末尾
    var displayElem = $(HiddenRegion + " " + elementName + ":first")[0];
    $(displayRegion).append(displayElem.outerHTML);
    $(displayElem).detach();


    var hiddenElem = $(displayRegion + " " + elementName + ":first")[0];
    $(hiddenElem).animate({ marginLeft: 0 - distance }, 1000, function () {
        //滑動結束，移除滑出螢幕外的元素，填補到HiddenRegion得末尾，併除去滑動造成的marginLeft的改變
        $(HiddenRegion).append(hiddenElem.outerHTML);
        $(hiddenElem).detach();
        $(HiddenRegion + " " + elementName + ":last").removeAttr("style");
    });
}


//往右滑動
//displayRegion 顯示區域
//displayNum 顯示區域中，顯示元素個數
//elementName 顯示元素標識
//HiddenRegion 隱藏區域
function MoveRight(displayRegion, displayNum, elementName, HiddenRegion) {
    if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
        return;
    }

    //算滑動距離
    var slideDistance = parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft"));

    //算元素的隱藏距離，即滑動前應該在displayRegion中的那裡加上新增的元素
    var hiddenDistance = 0 - parseInt($(displayRegion + " " + elementName)[0].offsetWidth);

    if (parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft")) == 0) {
        hiddenDistance -= parseInt($($(displayRegion + " " + elementName)[1]).css("marginLeft"));
    }

    var displayElem = $(HiddenRegion + " " + elementName + ":last")[0];
    $(displayElem).attr("style", "margin-left:" + hiddenDistance + "px");
    $(displayRegion).prepend(displayElem.outerHTML);
    $(displayElem).detach();

    $($(displayRegion + " " + elementName + ":first")[0]).animate({ marginLeft: slideDistance }, 1000, function () {
        $(HiddenRegion).prepend($(displayRegion + " " + elementName + ":last")[0].outerHTML);
        $($(displayRegion + " " + elementName + ":last")[0]).detach();
        $(displayRegion + " " + elementName + ":first").removeAttr("style");
    });
}
</script>

示例下載1
如果有更好的實現方法，請在下方法留言。

5.新需求說明：、
不改動原有的滑動效果；
網站首頁的廣告位不夠用，需要按地區進行分類；
當某一地區廣告位不足時，可以進行迴圈滑動；
全國地區類別中，可以通過滑動瀏覽到所有的公司，公司按加入時間降序排列。
方便在不同地區裡新增廣告位；
方便移植到其它需要滑動的區域中。

6.效果展示圖：
全國地區滑動

全國地區滑動

廣告位不足時，實現迴圈滑動

7.主要程式碼說明：
其實相較於剛開始的滑動效果，這裡只是新增了對全國地區和廣告位不足的處理，原始的滑動效果和HTML結構並沒有變化。仍舊是需要一個顯示區域和一個隱藏區域。

主要的HTML程式碼如下：

<body>
        <ul class="company_city">
            <li class="city on" city_abbr="QuanGuo">全國</li>
            <li class="city" city_abbr="HB">華北</li>
            <li class="city" city_abbr="HD">華東</li>
            <li><a href="" target="_self">全部公司 </a></li>
        </ul>
        <div class="ico" >
            <span id="icoL" ></span>
            <span id="icoR" ></span>
        </div>
    <div class="cooperation" >
        <!---全國 可通過滑動檢視所有公司 -->
        <ul class="img_display_QuanGuo" style="overflow:hidden;white-space:nowrap;width: 1175px;" >
            <li sortNum="4"><img src="4.png" ></li>
            <li sortNum="3"><img src="3.png" ></li>
            <li sortNum="2"><img src="2.png" ></li>
            <li sortNum="1"><img src="1.png" ></li>
        </ul>
        <ul class="img_hidden_QuanGuo" style="display:none;">

        </ul>
        <!-- 廣告位不夠用時，進行迴圈滑動-->
        <ul class="img_display_HB" style="overflow:hidden;white-space:nowrap;width: 1175px;display:none;" >
            <li sortNum="4"><img src="4.png" ></li>
            <li sortNum="3"><img src="3.png" ></li>
            <li sortNum="2"><img src="2.png" ></li>
            <li sortNum="1"><img src="1.png" ></li>
        </ul>
        <ul class="img_hidden_HB" style="display:none;">

        </ul> 

        <ul class="img_display_HD" style="overflow:hidden;white-space:nowrap;width: 1175px;display:none;" >
            <li sortNum="4"><img src="4.png" ></li>
            <li sortNum="3"><img src="3.png" ></li>
            <li sortNum="2"><img src="2.png" ></li>
            <li sortNum="1"><img src="1.png" ></li>         
        </ul>
        <ul class="img_hidden_HD" style="display:none;">
            <li sortNum="8" ><img src="8.png" ></li>
            <li sortNum="7" ><img src="7.png" ></li>
            <li sortNum="6" ><img src="6.png" ></li>
            <li sortNum="5" ><img  src="5.png" ></li>
        </ul>       
        <div class="clear"></div>
    </div>
</body>

這裡新增了兩點處理，一個是判斷廣告位是否足夠，即判斷相應地區的隱藏區域中是否有元素存在；另一個是增加了對全國地區的處理。

先說判斷廣告位的問題，如果隱藏區域中沒有元素存在，那麼在進行滑動之前，先要往隱藏區域中填充元素，怎麼填充視往左往右而定；在滑動完成之後要清空隱藏區域，回覆到原始狀態，以進行下一次滑動。

再說對全國地區的處理：在全國 這個選項被選中的情況下，使用者可以通過左右滑動看到所有的公司，這些公司按照一定規則排序，這裡的排序規則是給每個元素新增了一個sortNum屬性，sortNum越大排的就越前。
從HTML程式碼中可以看到，在img_display_QuanGuo中有四個元素，這是為了主頁顯示效果，而提前寫在頁面裡面的；而在img_hidden_QuanGuo中是沒有元素的，這就意味著每次滑動前，都要動態的新增元素到這個區域中；

新增元素的規則是這樣的：
使用者點選了向左滑動的按鈕；
JS會先獲取最左邊元素的sortNum；
如果sortNum是1，即最小的，那麼需要找到所有展示元素中sortNum最大的元素，並新增到隱藏區域中；
如果sortNum大於1，那麼需要找到比sortNum小，且離sortNum最近的一個元素，並把該元素新增到隱藏區域中；
進行滑動；
滑動完成時，將隱藏區域清空，回覆到原始狀態。

使用者點選了向右滑動的按鈕；
JS會先獲取最右邊元素的sortNum；
遍歷所有展示，找到比sortNum大，且離sortNum最近的一個元素，並把該元素新增到隱藏區域中；
如果找不到，則認為最右邊元素的sortNum是最大的，此時要進行迴圈滑動了，將sortNum=1的元素新增到隱藏區域中；
進行滑動；
滑動完成時，將隱藏區域清空，回覆到原始狀態。

$(function () {
    $(".company_city .city").each(function () {
        var abbr = $(this).attr("city_abbr");
        $(this).bind("click", function () {
            //切換不同地區的公司
            $(".cooperation").children().each(function (index, element) {
                $(element).css("display", "none");
            });
            $(".img_display_" + abbr).css("display", "block");

            //調整顯示字型
            $(".company_city .city").each(function () {
                $(this).removeClass("on");
            });
            $(this).addClass("on");

            //公司左右滑動
            $("#icoL").unbind("click");
            $("#icoR").unbind("click");
            $("#icoL").bind("click", function () {
                MoveRight(".img_display_" + abbr, 4, "li", ".img_hidden_" + abbr);


            });
            $("#icoR").bind("click", function () {
                MoveLeft(".img_display_" + abbr, 4, "li", ".img_hidden_" + abbr);
            });
        });
    });
    //點選 全國
    $(".company_city .city")[0].click();
});

//往左滑動
//displayRegion 顯示區域
//displayNum 顯示區域中，顯示元素個數
//elementName 顯示元素標識
//HiddenRegion 隱藏區域
function MoveLeft(displayRegion, displayNum, elementName, HiddenRegion) {
    //防止重複點選
    if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
        return;
    }

    //若是全國地區，則可以滑動看到所有公司（按時間降序排序，越新排越前；即SortNum越大排越前），需要進行處理
    var isQuanGuo = false;
    if (displayRegion.indexOf("QuanGuo") > 0) {
        isQuanGuo = true;
    }
    if (isQuanGuo == true) {
        var sortNum = parseInt($($(displayRegion + " " + elementName + ":last")[0]).attr("SortNum"));
        //迴圈、依次遞減的查詢比sortNum小的元素。
        while ($(HiddenRegion + " " + elementName).length <= 0 && sortNum > 1) {
            $(displayRegion).parent().find(elementName).each(function () {
                if (parseInt($(this).attr("SortNum")) == (sortNum - 1)) {
                    $(HiddenRegion).prepend(this.outerHTML);
                    return false;
                }
            });
            if ($(HiddenRegion + " " + elementName).length <= 0) {
                sortNum--;
            }
        }

        //為迴圈滑動，此時要查詢SortNum最大的元素
        if (sortNum == 1) {
            var maxNum = parseInt($($(displayRegion).parent().find(elementName + ":first")[0]).attr("SortNum"));
            var maxIndex = 0;
            $(displayRegion).parent().find(elementName).each(function (index,element) {
                if(maxNum<parseInt($(this).attr("SortNum"))){
                    maxNum = parseInt($(this).attr("SortNum"));
                    maxIndex = index;
                }
            });
            $(HiddenRegion).prepend($(displayRegion).parent().find(elementName)[maxIndex].outerHTML);
        }
    }

    //判斷元素總數是否等於displayNum，若是，則需處理
    var isEelementLack = false;
    if ($(HiddenRegion + " " + elementName).length <= 0) {
        isEelementLack = true;
    }
    if (isEelementLack == true) {
        $(HiddenRegion).prepend($(displayRegion + " " + elementName)[0].outerHTML);
    }    

    //算滑動距離
    var width = parseInt($($(displayRegion)[0]).css("width"));
    var marginLeft = 0;
    $(displayRegion + " " + elementName).each(function (index) {
        if (index > 0) {
            //除去displayRegion中第一個元素的marginLeft，因為滑動是以第一個元素本身的左邊為基準開始滑動的。
            marginLeft += parseInt($(this).css("marginLeft"));
        }
    });

    //原始滑動距離
    var distance = (width - marginLeft) / displayNum;

    //由於在滑動結束時，會移除滑動到螢幕之外的元素，所以得考慮元素移除後,如何恢復原始的佈局；
    //令滑動前，displayRegion中第一個元素的marginLeft為a，第二個元素的為b；
    //若a==0，滑動距離應加上b;若a<>0,則無需加上b
    if (parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft")) == 0) {
        distance += parseInt($($(displayRegion + " " + elementName)[1]).css("marginLeft"));
    }

    //從HiddenRegion中取出第一個元素，填補到displayRegion得末尾
    var displayElem = $(HiddenRegion + " " + elementName + ":first")[0];
    $(displayRegion).append(displayElem.outerHTML);
    $(displayElem).detach();


    var hiddenElem = $(displayRegion + " " + elementName + ":first")[0];
    $(hiddenElem).animate({ marginLeft: 0 - distance }, 1000, function () {
        //滑動結束，移除滑出螢幕外的元素，填補到HiddenRegion的末尾，併除去滑動造成的marginLeft的改變
        $(HiddenRegion).append(hiddenElem.outerHTML);
        $(hiddenElem).detach();
        $(HiddenRegion + " " + elementName + ":last").removeAttr("style");

        //清空HiddenRegion，保證元素不夠的情況下也可以迴圈滑動;回到初始狀態
        if (isEelementLack == true || isQuanGuo == true) {
            $(HiddenRegion).empty();
        }
    });


}


//往右滑動
//displayRegion 顯示區域
//displayNum 顯示區域中，顯示元素個數
//elementName 顯示元素標識
//HiddenRegion 隱藏區域
function MoveRight(displayRegion, displayNum, elementName, HiddenRegion) {
    if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
        return;
    }

    //若是全國地區，則可以滑動看到所有公司（按時間降序排序，越新排越前；即SortNum越大排越前），需要進行處理
    var isQuanGuo = false;
    if (displayRegion.indexOf("QuanGuo") > 0) {
        isQuanGuo = true;
    }
    if (isQuanGuo == true) {
        var sortNum = parseInt($($(displayRegion + " " + elementName + ":first")[0]).attr("SortNum"));
        //迴圈、一次遞增的查詢比sortNum大的元素
        while ($(HiddenRegion + " " + elementName).length <= 0 && sortNum <= $(displayRegion).parent().find(elementName).length) {
            $(displayRegion).parent().find(elementName).each(function () {
                if (parseInt($(this).attr("SortNum")) == (sortNum + 1)) {
                    $(HiddenRegion).prepend(this.outerHTML);
                    return false;
                }
            });
            if ($(HiddenRegion + " " + elementName).length <= 0) {
                sortNum++;
            }
        }
        //為迴圈滑動，此時要查詢SortNum為1的元素
        if ($(HiddenRegion + " " + elementName).length <= 0) {
            $(displayRegion).parent().find(elementName).each(function () {
                if (parseInt($(this).attr("SortNum")) == 1) {
                    $(HiddenRegion).prepend(this.outerHTML);
                    return false;
                }
            });
        }
    }


    //判斷元素總數是否等於displayNum，若是，則需處理
    var isEelementLack = false;
    if ($(HiddenRegion + " " + elementName).length <= 0) {
        isEelementLack = true;
    }

    if (isEelementLack == true) {
        $(HiddenRegion).prepend($(displayRegion + " " + elementName+":last")[0].outerHTML);
    }

    //算滑動距離
    var slideDistance = parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft"));

    //算元素的隱藏距離，即滑動前應該在displayRegion中的那裡加上新增的元素
    var hiddenDistance = 0 - parseInt($(displayRegion + " " + elementName)[0].offsetWidth);

    //這裡要注意hiddenDistance是負數，為了讓右邊新增的元素可以與原來的DIV中的第一個元素保持間距，需要做處理
    if (parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft")) == 0) {
        hiddenDistance -= parseInt($($(displayRegion + " " + elementName)[1]).css("marginLeft"));
    }

    //在顯示區域右邊新增元素
    var displayElem = $(HiddenRegion + " " + elementName + ":last")[0];
    $(displayElem).attr("style", "margin-left:" + hiddenDistance + "px");
    $(displayRegion).prepend(displayElem.outerHTML);
    $(displayElem).detach();

    $($(displayRegion + " " + elementName + ":first")[0]).animate({ marginLeft: slideDistance }, 1000, function () {
        //滑動結束，移除滑出螢幕外的元素，填補到HiddenRegion的頭部，併除去滑動造成的marginLeft的改變
        $(HiddenRegion).prepend($(displayRegion + " " + elementName + ":last")[0].outerHTML);
        $($(displayRegion + " " + elementName + ":last")[0]).detach();
        $(displayRegion + " " + elementName + ":first").removeAttr("style");

        //清空HiddenRegion，保證元素不夠的情況下也可以迴圈滑動
        if (isEelementLack == true || isQuanGuo==true) {
            $(HiddenRegion).empty();
        }
    });
}

相關推薦

學習Js（1）-使用Jquery實現滑動切換效果

1.前言雜談： 對於Javascript 是從大二就開始接觸了，那個時候剛開始接觸到web開發。在公司實習期間，由於什麼都不會，帶我師兄就讓我在百度傳課上看了一週的傳智播客的教學視訊，這才有點底子，可以寫寫正則，做表單驗證什麼的。到現在剛參加工作的時候

jQuery源碼學習筆記（1）

ase tolower nodetype apt jquer 元素 bre 技術分享 停止 在慕課網上學習jQuery源碼，做一些筆記小研究。 第1章 節點遍歷 第2章 文檔處理 第3章 元素操作 第4章 樣式操作 第5章 事件體系 第6章 數據交互 第7章

Node.js學習筆記（1）：Node.js快速開始

path 文本文 下載 啟動程序 直接 查看 學習筆記 完成後 編輯器 Node.js學習筆記（1）：Node.js快速開始 Node.js的安裝 下載 官方網址：https://nodejs.org/en/ 說明： 　　在Windows上安裝時務必選擇全部組件，包括勾選

Vue學習筆記（1）——在頁面右上角實現可懸浮/隱藏的系統選單

轉自榕樹島 本文不能算一個教程，而是記錄一隻Vue菜鳥踩坑心路歷程的筆記，對於正在踩坑的新手或許會有一點小幫助。作為第一篇正經八百的技術部落格，歡迎大家發表看法，關愛菜鳥，請輕拍 很久以後回來更一下，這個功能可以用Vuex輕鬆搞定，此文就當練習父子元件通訊了吧，emmm…… 原文： 這是個

Node.js 學習筆記（1）

　　事件發射器會觸發事件，並且在那些事件觸發時能處理他們。事件發射器對於提高程式碼的複用性和簡潔程度至關重要。 1.Echo伺服器 　　Echo伺服器是一個使用事件發射器處理重複性事件的簡單例子，當你給它傳送資料時，它會把資料傳送回來。如圖1-1所示：   圖1-1 Echo伺服器響應例

Node.js基礎學習筆記（1）

Node.js安裝 安裝教程可參考菜鳥教程的文件，連結如下： https://www.runoob.com/nodejs/nodejs-install-setup.html Node.js基礎-搭起一個web伺服器 在電腦上建立專案資料夾，並建立一個server.js檔案，

jQuery學習整理--（1）初識jQuery

jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 程式設計。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。jQuery庫包含以下功能：，HTML 元素選取，HTML 元素操作，CSS 操作，HTML 事件函式

matlab學習筆記（1）——粒子群優化演算法（PSO）的程式實現

     本文內容參考matlab R2016a完全自學一本通。     粒子群優化演算法（PSO）屬於進化演算法的一種，它從隨機解出發，通過迭代找到最優解。該演算法通過適應度來評價解的品質，並通過追隨當前搜尋到的最優值來尋找全域性最優。     假設在一個D維的目標搜尋空間

JS學習實踐（1） JavaScript 修改影象燈泡

    修改燈泡  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</tit

WPF學習筆記（1）：DataGrid單元格實現逐鍵過濾功能

    最近，開始學習WPF，其UI設計完全顛覆了傳統的設計理念，為程式設計師提供了極大的自由發揮空間，讓我為之驚歎，且為之著迷。然而，WPF在國內的熱度卻並不高，大部分貼子都是2012年以前的，出版的圖書也很少，參考的資料不多。為了避免在以後的程式設計中少走彎路，也防止自己遺忘，在此記錄

jQuery學習筆記（1）

1.頁面載入時就執行 <script> $(document).ready(function(){ alert("hello jquery") }) //簡寫 $(function(){ alert("hello jquery") })

Xilinx Zynq-7000嵌入式系統設計與實現 學習教程（1）

學習資料下載地址：http://www.edawiki.com 開篇體會; 　　Xilinx的ZYNQ系列FPGA是二種看上去對立面的思想的融合，ARM處理器的序列執行+FPGA的並行執行，著力於解決大資料處理、人工智慧等複雜高效能演算法處理。 新的設計工具的推出，vivado HLS，更加註重嵌入式系

【phaser.js學習筆記（1）】使用phaser.js製作遊戲

phaser.js是一款開源的HTML5遊戲框架，GitHub主頁上star超過了2萬。phaser.js支援使用JavaScript或TypeScript編寫遊戲，支援WebGL和Canvas渲染並可藉助第三方工具編譯成iOS，Android原生程式。phaser.js有兩

Vue.js 學習筆記（1）Centos環境下部署開發環境

1.安裝JS依賴管理工具npm yum install npm 2. 安裝vue npm install vue 3. 安裝vue命令列工具CLI sudo npm install --global vue-cli 4. 初始化專案 vue init webpack ne

processing學習例項（1）點選區域實現顏色改變

目標描述： 如下圖所示： 1、點選藍色區域使白色區域白黑變換； 2、點選其他地方實現黑色區域黑白變換； 要點：點選某一區域實現特定功能 思路：要實現點選某一區域實現特定功能，要用的 mouseClicked() 函式，在其中定義點選事件。 對於區域的選定，用到程式碼 

微服務學習筆記（1）——使用MagicOnion實現gRPC

tco cred time sharp ref 服務端 eve rpo 實現接口 1.什麽是gRPC 官方文檔：https://grpc.io/docs/guides/index.html 2.什麽是MagicOnion MagicOnion開源地址：https://git

Qt學習筆記（1）---QT5利用事件過濾器實現在控制元件上繪圖

首先，感謝 作者：一去丶二三裡 部落格地址：http://blog.csdn.net/liang19890820   Qt中要在控制元件中繪製圖像，需要重寫paintevent函式，本文通過EventFilter(事件過濾器)來實現在控制元件上的圖形繪製。 .h檔案 #

OpenCV學習筆記（1）——resize函式實現影象大小歸一化

在影象處理過程中，有時需要把影象調整到同樣大小，便於處理，這時需要用到影象resize() 原函式void resize(InputArray src, OutputArray dst, Size dsize, double fx=0, double fy=0, in

JS高級學習筆記（1）- 基本數據類型

java 數值 賦值 現在 lean evel image number com 原始數據 基本數據類型是一種即非對象也無方法的數據。JS中有6中基本類型：string、number、boolean、undefined、symbol。 多數情況下，基本類型直接代

開始寫博客，學習Linq（1）

設計 查詢 lin 數據源 任務 集成 部分 程序 編程 　　摘自《linq實戰》原文： 　　軟件很簡單。它可以歸結為兩件事情：代碼和數據。 　　開發軟件卻並非那麽簡單，其中很重要的一項任務就是編寫處理數據的代碼。 　　無論選擇了哪種語言，在程序開發得某個時候你將不得不開始