我有一个包含 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++;
}
最佳答案
我不会像你一样混淆 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'));
})
})
关于javascript - 每个图像都小于前一个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28633094/