console 命令行工具 X clear

console

  </style>
    <!-- 使用JQuery解决PNG图片背景不透明的问题 -->
    <script src="../js/jquery-1.3.2.min.js"></script>

    <!-- ******************************* -->
    <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").css({
                    "position": "absolute",
                    "top": "15px",
                    "left": "65px"
                });
            });
        });
    </script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我的开心小农场</title>

</head>

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

</html>

    <style>
        div {
            font-size: 12px;
            border: #999 1px solid;
            padding: 5px;
        }
        
        #bg {
            /*控制页面背景*/
            width: 456px;
            height: 266px;
            background-image: url(images/plowland.jpg);
        }
        
        img {
            /*控制图片*/
            position: absolute;
            top: 85px;
            left: 195px;
        }
        
        #seed {
            /*控制播种按钮*/
            background-image: url(images/btn_seed.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 49px;
            cursor: hand;
        }
        
        #grow {
            /*控制生长按钮*/
            background-image: url(images/btn_grow.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 154px;
            cursor: hand;
        }
        
        #bloom {
            /*控制开花按钮*/
            background-image: url(images/btn_bloom.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 259px;
            cursor: hand;
        }
        
        #fruit {
            /*控制结果按钮*/
            background-image: url(images/btn_fruit.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top: 229px;
            left: 368px;
            cursor: hand;
        }