Question

我使用W3.css和javascript创建了一个简单的图库。每张图片都是一张w3卡，下面有文字，占据屏幕的三分之一（使用w3-third）。我得到了javascript来缩放图像并在点击时将其移动到前面（因此它是可见的）并在第二次点击时返回。问题是，一旦图像返回，点击它什么都不做。这是gallery.html的代码（没有标题，因为它与图库无关）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Strona Główna</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3-theme-light-green.css">

<script type="text/javascript" src="js/closeAll.js"></script>
<!-- <link rel="Shortcut icon" href="../img/facin.ico" /> -->
</head>
<body>

<div class="w3-container  w3-theme-l3">
    <div class="w3-row">
            <div class="w3-container w3-third">
                <div class=" w3-container w3-card w3-sand">
                    <img
                        src="https://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg"
                        alt="img1" style="width: 100%;" onclick="onClick(this)">
                    <div class="w3-container">
                        <p>image 1</p>

                    </div>
                </div>
            </div>
            <div class="w3-container w3-third w3-sand">
                <div class="w3-container w3-card">
                    <img
                        src="http://www.techalliance.ca/wp-content/uploads/2011/11/sample-image-300X300.jpg"
                        alt="img2" style="width: 100%" onclick="onClick(this)">
                    <div class="w3-container">
                        <p>image 2</p>
                    </div>
                </div>
            </div>
            <div class="w3-container w3-third">
                <div class="w3-container w3-card w3-sand">
                    <img
                        src="http://www.freevectors.net/files/large/FloralFrameWithSampleText.jpg"
                        alt="img3" style="width: 100%" onclick="onClick(this);">
                    <div class="w3-container">
                        <p>img3</p>
                    </div>
                </div>
            </div>
        </div>

</div>

<footer class="w3-container w3-theme w3-text-black-opacity w3-small">
    <br>
    <div align="center">Copyright&copy; killermenpl 2015. All rights
        reserved</div>
    <div class="w3-container w3-tiny">
        Uses
        <a href="http://www.w3schools.com/w3css/">W3.css</a>
    </div>
</footer>
</div>
</body>
</html>

这是galeria.js的代码

function onClick(element) {
//alert("onclick");
// if (element.tagName != "img") {
// alert("not an image");
// return;
// }

if (!element.dataset.zoom) {
    element.dataset.zoom = "0";
}

if (element.dataset.zoom == "0") {
    element.dataset.zoom = "1";
    element.dataset.zindex = element.style.zIndex;

    element.style.position = "relative";
    element.style.zIndex = 100;

    element.style.width = "300%";
    element.style.height = "300%";

    //alert("zoom!");
} else {
    //alert("zoom!");
    element.style.zIndex = element.dataset.zindex;

    element.dataset.zoom == "0";

    element.style.width = "100%";
    element.style.height = "100%";
}
}

这可能是每个人都应该知道的蠢事，但我是javascript的新手和css的新手。此外，我知道放大时图像不会与屏幕中间对齐。我稍后会添加它。

Answer 1

在else声明中更改此行：

element.dataset.zoom == "0";

到此：

element.dataset.zoom = "0";

对于作业，您应该使用'='而不是'=='。

如果您希望图像在其中心原点缩放，则应使用CSS3 trasform: scale(x,y);属性并缩放元素。例如：

element.style.transform = "scale(1.5,1.5)";

和webkit浏览器：

element.style.webkitTransform = "scale(1.5,1.5)";

Javascript库只能运行一次

1 个答案: