0

http://blajeny.comで私は持っています：

jQuery('body').click(function(event_object)
    {
    spark(event_object.pageX, event_object.pageY);
    });

function spark(x, y)
    {
    console.log('Spark called.');
    var image_object = new Image();
    image_object.onLoad = function()
        {
        image_object.style.position = 'absolute';
        image_object.style.zIndex = 1;
        image_object.style.top = y;
        image_object.style.left = x;
        }
    image_object.src = '/img/spark.png';
    }

この段階での意図された効果は、ユーザーがクリックしたXとYに画像をロードすることです。（アニメーション化など、他のこともやりたいのですが、今はユーザーがクリックした場所に画像を表示させようとしています。）

javaScriptコンソールには、ハンドラーが呼び出されていることが示されていますが、マウスがクリックされたポイントのすぐ下と右側にあるかすんでいる青い円が表示されていません。

クリックした座標の下と右に新しい画像をロードするために、別の方法で何ができますか/すべきですか？

ありがとう、

4

4 に答える 4

2

As far as I know, the onLoad should be onload

var image_object = document.createElement('img');
image_object.onload = function() { // Note the small onload
    // your code
}

// Also, append the image_object to DOM
document.body.appendChild(image_object);
于 2013-02-15T19:09:57.110 に答える
0

私は同意します。最初に「img」タグを使用して要素を作成し、それにsrc値を割り当て、それを現在のdiv（この場合は本体）に追加します。

var imgTag = document.createElement("img");
imgTag.src = '/img/spark.png';
document.body.appendChild(imgTag);

お役に立てれば。

于 2013-02-15T19:19:32.780 に答える
0

You never append the image to the DOM, that's why you can't see it.

You can do

document.body.appendChild(image_object);

You must also replace onLoad by onload and specify the top and left position with an unit :

image_object.onload = function()  {
    image_object.style.position = 'absolute';
    image_object.style.zIndex = 1;
    image_object.style.top = '100px';
    image_object.style.left = '100px';
}

Demonstration

于 2013-02-15T19:09:31.623 に答える
0

画像をDOMに追加しているのがわかりません。おそらく、画像が表示されていないのはそのためです。

$('body').append($(image_object));
于 2013-02-15T19:11:48.847 に答える