每張圖片都比前一張少

Question

我有 5 張圖像的數組，我用 PHP 顯示。 我如何使用 JavaScript 來顯示它們，使每張圖像比前一張低 10%？

foreach($top_images as $top_i) {
    echo '#'.$ratio;
    echo '
        <br><img src="'.$top_i['url'].'" ><br>
        <script type="text/javascript">
            $(document).ready(function(){
                var img = new Image();
                img.src = "'.$top_i['url'].'";
                img.onload = function() {
                    var width = this.width;
                    var height = this.height;
                    ratio = '.json_encode($ratio).';
                    this.width = this.width - this.width * ratio/10;
                    this.height = this.height - this.height * ratio/10;
                }
                });
        </script>
    ';
    $ratio++;
}

Answer 1

我不會像你那樣混淆 php 和 js。 只需用php正常輸出圖像，然后在站點底部添加js： http : //jsfiddle.net/78hdpkzr/

$(document).load(function() {
    lastHeight = 0;
    $("img").each(function(i) {
        if (i != 0) {
            $(this).css({
                height: lastHeight / 100 * 90
            })
        }
        lastHeight = parseInt($(this).css('height'));
    })
})

Answer 2

使用 CSS 和下一個選擇器（適用於所有瀏覽器）

唯一的問題是圖像必須彼此相鄰

CSS：

 img { width: 100px; float:left; clear:both; } img + img { width: 90px; } img + img + img { width: 80px; } img + img + img + img { width: 70px; } img + img + img + img + img { width: 60px; }

 <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" />