2

我知道如何使用 onclick 或 onMouseOver 使图像出现，但我怎样才能使每次单击不仅在同一个地方产生适当的图像，而且例如在它之前的外观旁边连续产生适当的图像？我的想法是这样的：我点击reference1，然后出现一个picture1。然后我点击reference2，一个picture2出现在已经显示的picture1旁边。现在我再次点击reference1，我想连续看到图片1,2,1。我怎样才能做到这一点？我的理想是在填充时看到行滚动，并且删除按钮删除该行中的最后一个图像，甚至使图片跳出从文本字段中调用，但我可以自己搜索这些。我现在最关心的是新点击=新图像。谢谢你。

4

2 回答 2

0

这是一个例子。

<html>
  <head>
    <style>
      .refimg { width: 100px; height: 100px; }
      .choices a { margin-right: 2ex; }
      .choices img { display: none; }
      #target { display:block; width: 500px; overflow-x: scroll; border: 1px solid black; }
    </style>
  </head>
<body>
  Choices:
  <div class="choices">
    <a href="#" onclick="return putImage(image1);">ref1</a>
    <a href="#" onclick="return putImage(image2);">ref2</a>
    <image id="image1" src="image1.gif" class="refimg" />
    <image id="image2" src="image2.gif" class="refimg" />
  </div>
  <br />
  Selections: <input type="button" value="Delete" onclick="delImage()" />
  <nobr id="target">
  </nobr>

  <script>
  function putImage(src) {
    var a = src.cloneNode(true);
    a.id = ''; //clear id to prevent duplicate id
    target.appendChild(a);
    a.scrollIntoView(true);
    return false;
  }
  function delImage() {
    var a=target.children;
    if (a.length>0) target.removeChild(a[a.length-1]);
  }
  target.style.height=((target.offsetHeight-target.clientHeight)+100)+'px'; //extend height for scroll bar
  </script>

  </body>
</html>
于 2012-07-29T20:25:16.810 回答
0

假设这是相对简单的 - 您可以跟踪图像列表中的当前位置，然后创建一个处理当前图像的函数，然后增加该位置。让 onClick 事件调用此函数，然后就可以了。

可以在此处查看使用 JQuery 的实际示例：http: //jsfiddle.net/8Q4LQ/

于 2012-07-28T20:29:55.917 回答