使用Javascript Vars造型Div

我正在做一個小實驗，試圖隨意使用JavaScript循環在div內放置圖像。我一直在遇到一些麻煩。使用Javascript Vars造型Div

這裏是我所（簡化）：

for(var i = 0; i < 10; i++) 
{ 
var top = random(-20, 20); 
var left = random(-20, 20); 

document.write(
    <div class="one" style="\"left:" + left + ";\""> 
    <img src="hein.png"/> 
    </div> 
); 
}

的目標是生成一些頂部和左側值，每itteration這些生成的值顯示一個新的形象。我知道這是style =「」的語法錯誤。但我沒有試過的東西已經工作

我怎樣才能得到這個工作。

來源

2009-07-29 febs

你忘了引號document.write和你逃避它的內部錯誤的字符

document.write(
    "<div class=\"one\" style=\"left:" + left + ";\"> 
    <img src=\"hein.png\"/> 
    </div>" 
);

來源

2009-07-29 19:32:56 RaYell

你酬勞來包裝整體引號document.write輸出的，就像這樣：

document.write('<div class="one" style="left:"' + left + ';"><img src="hein.png"/></div>');

來源

2009-07-29 19:34:40 Eifion

你應該首先考慮使用像jQuery這樣的JavaScript庫。這將簡化您的工作。

比方說，你有這個標記

<div id="image-container"> 

</div>

包括jQuery的在你的標記

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

從JavaScript你這樣做，你已經在你的標記包括jQuery的後

for(var i = 0; i < 10; i++) { 
    var top = random(-20, 20); 
    var left = random(-20, 20); 

    $('#image-container').append('<img src="hein.png" style="position: absolute; top: '+top+'; left : '+left +';" />'); 
}

來源

2009-07-29 19:37:51

然而，這是完全不同的，因爲你不得不這樣做* *頁面加載後，而不是*當*頁面加載與document.write一樣。 – Guffa 2009-07-29 19:41:48

這不是一個很好的做法document.write – 2009-07-29 19:43:26

您忘記引用document.write調用中的字符串。你也忘了測量單位。

for(var i = 0; i < 10; i++) { 
    var top = random(-20, 20); 
    var left = random(-20, 20); 

    document.write(
     '<div class="one" style="left:' + left + 'px;top:' + top + 'px">' + 
     '<img src="hein.png"/>' + 
     '</div>' 
    ); 
}

來源

2009-07-29 19:40:06 Guffa

使用PHP來代替：

<?php 
// Middle coords of my div 
    $top = 200; 
    $left = 350; 

    for($i = 0; $i < 20; $i += 1) 
    { 
     $tran = rand(-130,170); 
     $lran = rand(-300,270); 
     // Fix line breaks 
     $top = $top - 49; 
     echo '<div style="position:relative; 
        display: block; 
        height: 49px; 
        width:49px; 
        left:' . ($left + $lran) . 'px; 
        top:' . ($top + $tran) . 'px; 
       ">' . '<img src="img.png"/>' . '</div>'; 
    } 

?>

真棒！感謝您使用字符串語法的幫助！

來源

2009-07-29 21:33:37 febs

使用Javascript Vars造型Div

回答

相關問題