不朽情缘属于什么电子游戏

書名： jQuery從入門到精通（軟件開發視頻大講堂）
作者名：明日科技
本章字數： 676字
更新時間： 2020-11-28 23:47:27

5.6 綜合實例：實現我的開心小農場

通過jQuery可以很方便地對DOM節點進行操作，下面就通過“我的開心小農場”實例，來說明通過jQuery操作DOM節點的具體應用。

本實例的需求主要有以下兩點：

（1）在頁面中引入農場圖片，單擊“播種”“生長”“開花”“結果”按鈕時，在農場中顯示相應效果。

（2）在IE6之前版本的瀏覽器下，png格式圖片有背景，將其處理為透明效果。

運行本實例，將顯示如圖5.15所示的效果，單擊“播種”按鈕，將顯示如圖5.16所示的效果，單擊“生長”按鈕，將顯示如圖5.17效果，單擊“開花”按鈕，將顯示如圖5.18的效果，單擊“結果”按鈕，將顯示一棵結滿果實的草莓秧。

圖5.15 頁面的默認運行結果

圖5.16 單擊“播種”按鈕的結果

圖5.17 單擊“生長”按鈕的結果

圖5.18 單擊“開花”按鈕的結果

【例5.11】我的開心小農場。（實例位置：光盤\TM\sl\5\11）

（1）創建一個名稱為index.html的文件，在該文件的<head>標記中應用下面的代碼解決PNG圖片背景不透明的問題。

        <!--使用jQuery解決PNG圖片背景不透明的問題-->
        <script src="../js/jquery-1.11.1.min.js"></script>
        <script src="../js/jquery.pngFix.js"></script>
        <script src="../js/jquery.pngFix.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#bg").pngFix();
            });
        </script>

（2）在頁面的<body>標記中，添加一個顯示農場背景的<div>標記，并且在該標記中添加4個<span>標記，用于設置控制按鈕，代碼如下：

        <div id="bg">
            <span id="seed"></span>
            <span id="grow"></span>
            <span id="bloom"></span>
            <span id="fruit"></span>
        </div>

（3）編寫CSS代碼，控制農場背景、控制按鈕和圖片的樣式，具體代碼參見光盤。

（4）編寫jQuery代碼，分別為播種、生長、開花和結果按鈕綁定單擊事件，并在其單擊事件中應用操作DOM節點的方法控制作物的生長，具體代碼如下：

        <script type="text/javascript">
            $(document).ready(function(){
                $("#seed").bind("click", function(){                   //綁定播種按鈕的單擊事件
                $("#temp").remove();                                   //移除img元素
                $("#bg").prepend("<span id='temp'><img src='images/seed.png' /></span>");
                });
                $("#grow").bind("click", function(){                   //綁定生長按鈕的單擊事件
                $("#temp").remove();                                   //移除img元素
                $("#bg").append("<span id='temp'><img src='images/grow.png' /></span>");
                });
                $("#bloom").bind("click", function(){                  //綁定開花按鈕的單擊事件
        $("#temp").replaceWith("<span id='temp'><img src='images/bloom.png' /></span>");
                });
                $("#fruit").bind("click", function(){                  //綁定結果按鈕的單擊事件
            $("<span id='temp'><img src='images/fruit.png' /></span>").replaceAll("#temp");
                });
        $("#seed, #grow, #bloom, #fruit").bind("click", function(){    //為多個按鈕綁定單擊事件
                    $("#temp").pngFix();                               //控制IE6下PNG圖片背景透明
                    $("#temp").css({"position":"absolute", "top":"85px", "left":"195"});
                });
            });
        </script>

注意

$("tr:odd")和$("tr:even")選擇器中索引是從0開始的，因此第一行是偶數行。

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

5.6 綜合實例：實現我的開心小農場

jQuery從入門到精通（軟件開發視頻大講堂）