正確使用javascript位置圖像

我需要創建幾十個小圖像並將它們完全放在屏幕上相對於屏幕的頂部和左側。我有一個頁面上有一個div，目前，我正在嘗試使用javascript創建每個元素。我如何精確定位每個元素？正確使用javascript位置圖像

var divo = document.getElementById('pagediv'); 
var objImage = document.createElement('img'); 
objImage.setAttribute('src', 'images/Red_L.gif'); 
divo.appendChild(objImage);

這是創建圖像可以，並把它放在屏幕上。但是，你怎麼能確切地告訴它在哪裏定位？

來源

2012-10-05 Martin Smellworse

你是什麼意思定位？在特定的x/y座標處或某個元素之後？ – epascarello

在特定的x/y座標 –

如果您是動態創建圖像，我相信您可以通過循環運行並定位圖像。

var divo = document.getElementById('pagediv'); 
    var leftPos = 0; 
    var newSrc = ''; 
    for(i = 0 ; i < 12 ; i++) 
    { 
     newSrc = "images/red_"+i+".png"; 
     var objImage = document.createElement('img'); 
     objImage.src = newSrc; 
     objImage.style.left=leftPos+20+"px"; 
     objImage.style.zIndex=2; 
     objImage.style.position="absolute"; 
     leftPos = objImage.style.width; 
     divo.appendChild(objImage); 
    }

如果您的圖片命名爲red_1.png,red_2.png等等，這個代碼將一個接一個地排列有20像素的彼此之間的間距定位圖像。

來源

2012-10-05 16:04:35

我想你應該看看CSS absolute positioning。

來源

2012-10-05 15:26:33 juanignaciosl

「在特定的x/y座標」

設置它的CSS。

var divo = document.getElementById('pagediv'); 
var objImage = document.createElement('img'); 
objImage.setAttribute('src', 'images/Red_L.gif'); 
objImage.style.top="100px"; 
objImage.style.left="100px"; 
objImage.style.zIndex=2; 
objImage.style.position="absolute"; 
divo.appendChild(objImage);

來源

2012-10-05 15:41:52 epascarello

如果您像這樣設置位置，是不是將十幾張圖像放在彼此之上？ –

@harsha我當然希望OP能夠足夠聰明地爲每張圖片設置頂部/左側。 – epascarello

評論你的代碼，而不是他的聰明！ :-) –

使用offsetTop和offsetLeft可能潛在地解決您的問題http://www.quirksmode.org/js/findpos.html - 但它可能在某些瀏覽器中有問題。我建議僱用getBoundingClientRecthttp://ejohn.org/blog/getboundingclientrect-is-awesome/來獲取和偏移每個圖像的x/y座標。

來源

2012-10-05 16:21:40

正確使用javascript位置圖像

回答

相關問題