-2

我正在开发一个 HTML5 Windows 应用程序，其中一个屏幕在上、左和右侧有 3 个图像，如下图红色标记所示。

在此处输入图像描述

我只想通过单击按钮时滑出图像来隐藏这三个图像。请提供有关如何使用 HTMl5/javascript 执行此操作的代码

程序的代码在这里

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TamilKarpom</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<script>
    function diffImage(img) {
        if (img.src.match("images/on_btn.png")) {
            console.log('Low');
            img.src = "images/off_btn.png";
        }
        else {
            console.log('up');
            img.src = "images/on_btn.png";
        }
    }


</script>

<!-- TamilKarpom references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<img src="images/Title.png" id="full-screen-background-image"/>
<img src="images/yellow.png" id="image4"  style="position:absolute; height: 734px; left: 1195px; top: 41px; width: 229px;"/>
<img src="images/glow.png" style="position:absolute" id="full-screen" />
<a href="uyireluthukkal.html">
<img src="images/blue.png" id="image3" style="position:absolute; left: 253px; top: -100px; width: 880px; height: 276px;"/>
</a>
<img src="images/red.png" id="image2" style="position:absolute; width: 220px; left: -48px; top: 24px; height: 734px;"/>
<img src="images/title_01.png"style="position:absolute; left: 330px; top: 58.5px; width: 700px; height: 630px;" />
<img  style="position:absolute; left: 593.5px; top: 636.33px; width: 171px; height: 122.5px;" src="images/off_btn.png"  id="image1"   onclick="diffImage(this); "/>
 </body>
  </html>
4

1 回答 1

1

最简单的方法是结合使用 Javascript 和 CSS。为了得到一个好的答案，您应该发布一些源代码，但我会尝试：

首先，准备好让脚本可以找到的代码。将开关的 id 设置为，例如“switchToHideImages”：

<img id="switchToHideImages" src=" .....

为要显示/隐藏的图像添加一个类，例如“myImages”

<img class="myImages" src=" .....

然后创建一个名为 myImagesHidden 的 css 类：

.myImagesHidden {
    display: none; /* this will hide all elements which have this class */
}

然后，使用 jQuery，将此代码添加到 HTML 页面的底部（最佳实践，使 javascript 不会减慢页面加载速度）。

如果您的网站上还没有 jQuery，请添加以下行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后这个，函数本身：

<script>
    $(document).ready(function(){
        $("#switchToHideImages").on("click", function(){
            $(".myImages").toggleClass("myImagesHidden");
        });
    });
</script>

单击该按钮现在将选择具有“myImages”类的图像，然后将“myImagesHidden”类添加到它们。这将导致它们消失。如果单击开关时元素（此处为图像）上已经存在类“myImagesHidden”，它将被删除 - 导致图像重新出现。

编辑：

就像其他人已经说过的那样，JSFiddle 可以更轻松地帮助您并尝试代码。但是试试这个：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TamilKarpom</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

        <style>
            .myImagesHidden {
                display: none; /* this will hide all elements which have this class */
            }
        </style>

        <!-- TamilKarpom references -->
        <link href="/css/default.css" rel="stylesheet" />
    </head>
    <body>
        <img class="myImages" src="images/Title.png" id="full-screen-background-image"/>
        <img class="myImages" src="images/yellow.png" id="image4"  style="position:absolute; height: 734px; left: 1195px; top: 41px; width: 229px;"/>
        <img src="images/glow.png" style="position:absolute" id="full-screen" />
        <a href="uyireluthukkal.html">
            <img class="myImages" src="images/blue.png" id="image3" style="position:absolute; left: 253px; top: -100px; width: 880px; height: 276px;"/>
        </a>
        <img class="myImages" src="images/red.png" id="image2" style="position:absolute; width: 220px; left: -48px; top: 24px; height: 734px;"/>
        <img src="images/title_01.png"style="position:absolute; left: 330px; top: 58.5px; width: 700px; height: 630px;" />
        <img  style="position:absolute; left: 593.5px; top: 636.33px; width: 171px; height: 122.5px;" src="images/off_btn.png"  id="switchToHideImages"   onclick="diffImage(this); "/>

        <!-- TamilKarpom references -->
        <script src="/js/default.js"></script>
        <!-- WinJS references -->
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            function diffImage(img) {
                if (img.src.match("images/on_btn.png")) {
                    console.log('Low');
                    img.src = "images/off_btn.png";
                }
                else {
                    console.log('up');
                    img.src = "images/on_btn.png";
                }
            }

            //Add event listener to the switch, and set it to toggle the images with the class "myImages"
            $(document).ready(function(){
                $("#switchToHideImages").on("click", function(){
                    $(".myImages").toggleClass("myImagesHidden");
                });
            });
        </script>
    </body>
</html>
于 2013-09-20T11:22:27.983 回答