我是 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>
任何帮助是极大的赞赏!