0

我是 JavaScript 新手,我无法解决这个问题。

我正在尝试创建一个 onclick 事件,该事件将在方法中切换一个值。我正在使用 OpenSeadragon,我目前将其设置为 onclick:

viewer.world.getItemAt(1).setOpacity(0);

当我在 html 中按下按钮时,我需要 setOpacity(0) 在 0 和 1 之间切换。这将显示我在 OpenSeadragon 中设置的图层。该层反映在 .getItemAt(1) 中。这是带有代码的页面的链接:http ://web.stanford.edu/~cmalex/woel 。

这是完整的代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name = "viewport" content = "user-scalable = no">
    <title>Wonder of Everyday Life</title>
    <link rel="stylesheet" href="styles/normalize.css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen">
    <script src="scripts/jquery.min.js"></script>
</head>

<body>
<div id="header">
    <h1 class="museum">Cantor Arts Center</h1>
    <h1><a href="javascript:history.go(0)" class="show">Restart</a></h1>
</div>    

<div id="subheader">
    <h2>The Wonder of Everyday Life</h2>
    <p>Dutch Golden Age Prints</p>
</div>

<div id="openseadragon"></div>

<div id="instructions">
    <p>Pinch and Zoom or use controls</p>
</div>
<div id="footer">
    <div id="toolbar">
        <a id="zoom_in" href="#zoom_in"></a> 
        <a id="zoom_out" href="#zoom_out"></a>
        <a id="reset" href="#reset"></a> 
        <a id="view" onclick="viewer.world.getItemAt(1).setOpacity(0);"></a>
    </div>
</div>
<script src="scripts/openseadragon.min.js"></script>
<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon",
        prefixUrl: "scripts/images/",
        tileSources: "openseadragon/map.dzi",
        opacity: 1,
        zoomInButton: "zoom_in",
        zoomOutButton: "zoom_out",
        homeButton: "reset",
        showNavigator:  true,
        navigatorPosition: "ABSOLUTE",
        navigatorTop:      "10px",
        navigatorLeft:     "10px",
        navigatorHeight:   "145px",
        navigatorWidth:    "125px",
        visibilityRatio: 1.0,
        constrainDuringPan: true
    });

    viewer.addTiledImage({
        tileSource: "openseadragon/overlay.dzi",
        index: 1
    });


</script>

</body>
</html>

任何帮助是极大的赞赏!

4

1 回答 1

0

不要做一个懒惰的流浪汉,在你的代码中输入那个片段。哈哈&zwnj;&#8203,当您插入该片段时,我注意到您的网站源代码中有一些特殊字符。

viewer.world.getItemAt(1).setOpacity((viewer.world.getItemAt‌​(1).getOpacity())?0:‌​1)

这将获得元素的当前不透明度值,viewer.world.getItemAt‌​(1).getOpacity()并将显示它的反面(i)?0:1

我要求使用 Math.floor(i) 因为 opacity 是一个十进制值,如果你遇到像你这样的值,0.8你可以将它四舍五入,0因为你想消除元素。虽然它在您的代码中不是必需的。

改变

<div id="footer">
    <div id="toolbar">
        <a id="zoom_in" href="#zoom_in"></a> 
        <a id="zoom_out" href="#zoom_out"></a>
        <a id="reset" href="#reset"></a> 
        <a id="view" onclick="viewer.world.getItemAt(1).setOpacity(0);"></a>
    </div>
</div>

<div id="footer">
    <div id="toolbar">
        <a id="zoom_in" href="#zoom_in"></a> 
        <a id="zoom_out" href="#zoom_out"></a>
        <a id="reset" href="#reset"></a> 
        <a id="view" onclick="viewer.world.getItemAt(1).setOpacity((viewer.world.getItemAt(1).getOpacity())?0:1);"></a>
    </div>
</div>

此外,您应该删除任何限制函数被调用一次的绑定,例如offone 以上解决方案在您的站点中有效。我检查了。

https://meta.stackexchange.com/questions/170970/occasionalally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert

于 2016-11-08T06:11:20.203 回答