单独工作的 javascript 使淋浴演示文稿空白

Posted 2023-05-08

【中文标题】单独工作的 javascript 使淋浴演示文稿空白

【英文标题】：Separately working javascript makes Shower presentation blank out

【发布时间】：2016-05-16 10:58:12

【问题描述】：

我希望这不是含糊的。如果是这样，请说出来。

我正在尝试在Shower 演示文稿中加入一些交互性。交互式图表的脚本在 jsfiddle 以及本地 html 上运行良好。当我将相关位复制到 Shower-presentation-html-file 的一个部分 (class="slide") 中时，它加载得很好。

但是当我单击其中一个时间跨度（按钮 b2007 或 b2016）以动画/裁剪图表时，页面变为黑色。如果我用箭头键来回导航，我可以返回到幻灯片，我看到脚本确实有效，因为它确实显示了选择的时间跨度。

所以问题似乎是什么，当我调用 .click(function) 时，它也以某种方式调用了 Shower/shower.min.js 中的某些内容。由于我是一个初学者，我不敢在那里改变任何东西，而是希望你有一个绝妙的主意。

$('#b2007').click(function() 
  $('#trendcont').animate(
    width: '300px'
  , 1000);
);

$('#b2016').click(function() 
  $('#trendcont').animate(
    width: '800'
  , 1500);
);

#trendcont 
  border: 0px solid #000;
  height: 350px;
  width: 1px;
  overflow: hidden;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
to begin, click on one of the time spans.
<a href="#" id="b2007">2004-2007</a>
<a href="#" id="b2016">2004-2016</a>
<div id='trendcont'>
  <iframe scrolling="no" style="border:none;"   src="https://www.google.com/trends/fetchComponent?hl=de&q=Jatropha,palm oil&cmpt=q&tz=Etc/GMT-1&tz=Etc/GMT-1&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=800&h=800">
  </iframe>
</div>

【参考方案1】：

你有我可以尝试的工作演示吗？这将使一切变得容易得多。 Shower 1.x 和 2.x 也有很大的不同，你的是哪一款？

【讨论】：

我在这里使用最新的 shwr.zip：github.com/shower/shower/wiki/Quick-Start 你在寻找什么格式的演示？更多代码或压缩文件？ shwr-index.html 非常前卫。我只是将上面的所有功能代码复制到正确的位置。主要问题是，单击鼠标时屏幕变黑。后续问题：有没有办法通过鼠标点击转发幻灯片？