jquery標題風格項目

我喜歡有一個浮標列表圖像的標題標記標題... 我已經設法讓一些jquery獲取和做陽離子但放置或CSS不工作...jquery標題風格項目

也許我的「基地」是錯誤的....幫助

這是網頁：http://pfibco.ca/04-accessoires-fra.php?lang=fra

，這是靈感link

2010-12-07 menardmam

什麼標記是你的工作？你可以發佈一個到目前爲止你的演示，也許你想要的屏幕截圖？ – 2010-12-07 18:40:46

我找到了正確的答案here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Make Nice Captions Using Image Alternative Tag</title> 
    <style> 
    /* Style wrapping elements */ 
    .caption {position: relative; display: block;} 
    .caption div {position: absolute; padding: 5px; bottom: 0; text-align: center; line-height: 150%; color: #ffffff; background: #000000;} 
    </style> 
</head> 

<body> 
    <h1>Make Nice Captions Using Image Alternative Tag</h1> 
    <img src="path to the image goes here" alt="Here goes the alternative text which pops out on hover" /> 
</body> 

</html>

和或jQuery的部分：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // Wrap up images 
    $('img').each(function() { 
    $(this).wrap('<div class="caption"></div>').after('<div>' + $(this).attr('alt') + '</div>'); 
    $('.caption').width($(this).width()).children('div').each(function() { 
     $(this).css({width: $(this).siblings('img').width(), opacity: 1, display: 'block'}); 
    }); 
    }); 
}); 
</script>

來源

2010-12-07 20:12:48 menardmam

jquery標題風格項目

回答

相關問題