Question

我有这段代码：

while ($row = mysql_fetch_assoc($result1)) {
echo "
<a href='#'id='VV".$row['id']."'>
<p>".$row['title']."</p>
<p>".$row['date']."</p>
<img onload='scale()' id='II".$row['id']."' src='../res/videos/img/".$row['img']."'/>
</a>
<script type='text/javascript'>
function scale(){
    var image = document.getElementById('II".$row['id']."');
    var width = image.width;
    var height = image.height;
    if (width > 150) {
    image.style.width = '150px';
    image.style.height = 'auto';
    }
    width = image.width;
    height = image.height;
    if (height > 80) {
    image.style.height = '80px';
    image.style.width = 'auto';
    }
    width = image.width;
    height = image.height;
}
VV".$row['id'].".onclick = function() {
var Result = '".$row['id']."';
location.href='loged.php?Result=' + Result;
     }
</script>
";
}?>

我希望在每个加载的图像上调用resize函数，但是在加载最后一个图像时调用它，并且只有最后一个图像生效。我应该改变什么？

Answer 1

您要为每个$行放置脚本。我将有一个javascript函数的副本，然后你可以调用该单个函数N次将id传递给函数。这样它就可以用于所有行，而不仅仅是最后一行（因为JS函数的最后一个副本将是唯一一个被调用的行）。

简短回答：通过获取id参数使您的函数更好，并且只将该函数放在页面上一次。允许你foreach用每个id调用所述函数。

Answer 2

我认为您正在尝试将图像放在150x80的区域内。如果是这种情况，我建议您使用CSS background-size: contain为您进行缩放。

while ($row = mysql_fetch_assoc($result1))
    echo "<a href='#' id='VV" . $row['id'] . "'>" .
           "<p>" . $row['title'] . "</p>" .
           "<p>" . $row['date'] . "</p>" .
           "<div id='II" . $row[id] . "' " .
                "style='width: 150px; " .
                       "height: 80px; " .
                       "background: url(../res/videos/img/" . $row['img'] . "); " .
                       "background-size: contain; " .
                       "background-repeat: no-repeat;'>" .
           "</div>" .
         "</a>";

将样式抽象为CSS文件是个好主意。

while ($row = mysql_fetch_assoc($result1))
    echo "<a href='#' id='VV" . $row['id'] . "'>" .
           "<p>" . $row['title'] . "</p>" .
           "<p>" . $row['date'] . "</p>" .
           "<div id='II" . $row[id] . "' " .
                "class='my_img_box' " .
                "style='background: url(../res/videos/img/" . $row['img'] . ");'>" .
           "</div>" .
         "</a>";

CSS

div.my_img_box {
    width: 150px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
}

Javascript会在每个图像加载时调整大小

2 个答案: