動態地將背景圖像添加到多個元素

我有我想要顯示的圖像列表。圖像具有不同的寬度和高度，我想將它們全部放入li元素中，但li元素對於每個子圖像應具有相同的尺寸。動態地將背景圖像添加到多個元素

到這個唯一的方式（以使得圖像將適合在標準尺寸李箱）是指定該圖像作爲li元素的背景：

<ul> 
     <li> 
     <div></div> 
     <span>Image1</span> 
     </li> 
     <li> 
     <div></div> 
     <span>Image2</span> 
     </li> 
     <li> 
     <div></div> 
     <span>Image3</span> 
     </li> 
     <li> 
     <div></div> 
     <span>Image4</span> 
     </li> 
    ...and many more 
</ul>

CSS：

ul li {  
     width: 75px; 
     height: 75px; 
     } 


ul li div{ 
     background-image: url('genereic path calculated in jquery'); 
     background-size: contain; /*IMPORTANT THIS!*/ 
     }

所有圖片應該由75調整爲75 ...從而使圖像適合盒 - 這就是爲什麼我使用背景圖片屬性...

基本上，我可以爲每個圖像爲此，但我有很多圖像...所以我需要爲每個列表項子div指定一個背景圖像...

我該如何動態地爲每個新的li> div添加這個背景圖片？

例子：

$(function() { 

    $("li div").each(function() { 
     $(this).css('background-image','url(images/' + 'imagetitle)'); 
    }); 
});

我怎樣才能讓這個dymamic，而不必爲每個格指定背景圖像...

謝謝！

來源

2013-02-28 DextrousDave

這完全取決於你是否有一個圖像文件名的數組，或者它們是否符合'image-01.jpg'，'image-02.jpg'等模式，或者你正在獲取他們通過AJAX .... – Blazemonger 2013-02-28 16:24:14

@Blazemonger：我也同意火焰無論你有像img01.jpg，img02.jpg等文件夾中的數組或圖像序列。 – 2013-02-28 16:29:16

首先，您將擁有包含圖像的任何數據源，對嗎？從它創建一個數組。

var liArray = { 'url1', 'url2', 'url3' };

然後嘗試for循環

for(i=0, i<liArray.length,i=i+1) 
{ 
var odv = $.create("li"); 
odv.css('background-image','url(images/' + liArray[i])'); 
odv.appendTo($(ul)); 
}

這將動態創建圖像。這是你的問題嗎？

你必須關心你的絕對圖像路徑。我認爲很明顯，如果您在數組內傳遞絕對路徑，那麼在括號內沒有需要的圖像文件夾。

來源

2013-02-28 16:32:58 redflag237

好的謝謝。將看看我能做些什麼... – DextrousDave 2013-02-28 18:33:59

也許你需要用$（odv）語句選擇你的odv變量。我現在不確定，如果它仍然是JQ環境中的變量。只是嘗試 - 如果你有任何問題只是發佈他們。 – redflag237 2013-03-04 09:39:45

就我個人而言，我會把CSS放在一個CSS文件中。

.addBackground { 
    background: url(./path_to_my_image.png); 
}

然後，當你無論如何使用jQuery ..

$("span").each(function() { 
    $(this).addClass("addBackground"); 
});

來源

2013-02-28 16:45:09 KryptoniteDove

謝謝。但是，我如何動態地填充圖像的路徑？這樣，我將不得不指定不同的.addbackground類...每個圖像都會有一個diff背景 – DextrousDave 2013-02-28 17:43:49

您是否試圖使用每個列表項> div作爲縮略圖的無序列表創建圖像庫？基本上我認爲你可以硬編碼CSS文件，並在DOM準備上面的代碼時使用樣式，或者使用像PHP這樣的服務器端語言來索引圖像文件夾中的所有文件，並將CSS文件吐出，這樣每次你將一個文件添加到目錄中，它將創建一個新類。如果您認爲這聽起來很不錯，我可以提供一些代碼。 – KryptoniteDove 2013-02-28 18:05:42

正確。 li項目應該包含div（縮略圖）和跨度（這是作爲圖像描述的文本）...我希望你的幫助是 – DextrousDave 2013-02-28 18:36:09

PHP代碼：

<?php 


function createGallery() { 
if ($pwd = opendir('./images/')) { 

    /* Loop over the directory. */ 
    while (false !== ($file = readdir($pwd))) { 
     $file_name = pathinfo($file); 
     $fn = $file_name['filename']; 

      if ($file_name['extension'] == "png") { 

       doCSS($fn, $file); 

      } 

    } 
    closedir($pwd); 
} 
} 

function doCSS($fn, $image) { 
$cssFile = "./gallery.css"; 

if (file_exists($cssFile)) { 
    // Attempt to open for append 
    $fh = fopen($cssFile, "a") or die("Error opening file."); 
} else { 
    // Attempt to create 
    $fh = fopen($cssFile, "w") or die("Error opening file."); 
} 

     $string = "#".$fn." { background: url(./images/".$image."); } "; 
    // Write to file 
    fwrite($fh, $string); 


fclose($fh);  
} 

createGallery(); 

?>

輸出到gallery.css

#photo1 { background: url(./images/photo1.png); } #photo3 { background: url(./images/photo3.png); } #photo3menu_OLD { background: url(./images/photo3menu_OLD.png); } #photo1small { background: url(./images/photo1small.png); } #photo3menu { background: url(./images/photo3menu.png); } #photo3small { background: url(./images/photo3small.png); } #photo4 { background: url(./images/photo4.png); } #photo4details { background: url(./images/photo4details.png); }

個人而言，我會寫一類用於定位的div和固定的尺寸和包括在沿線的主頁面中的CSS文件的東西： -

.dimensions { 
    position: relative; 
    width: 75px; height: 75px; display: block; 
}

我也將使用PHP的頁面上創建的標記而不是JS，因爲無論如何您都在遍歷目錄來創建CSS文件。希望這可以幫助。

來源

2013-02-28 23:47:31 KryptoniteDove

動態地將背景圖像添加到多個元素

回答

相關問題