2

onclickまたはonMouseOverを使用して画像を表示する方法は知っていますが、クリックするたびに、同じ場所だけでなく、たとえば、前の表示の横に連続して適切な画像を生成するにはどうすればよいですか？私の考えはこれです：reference1をクリックすると、picture1が表示されます。次に、reference2をクリックすると、既に表示されているpicture1の横にpicture2が表示されます。ここでもう一度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 に答える