每张图片都比前一张少
Each image less than the previous
我有一个带有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'));
})
})
使用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" />
相关文章:
- 显示某个用户ID的某个标签的30张Instagram图片
- 如何从三张图片中选择一张?其余的必须是看不见的
- 通过onclick事件将一张图片更改为6张图片
- 我用JavaScript FIleReader读了一张图片,但是我无法得到图片的信息
- 每张图片都比前一张少
- HTML5画布如何在另一张图片上绘制一张图片
- 完整的背景图片幻灯片jquery,想让幻灯片的最后一张图片可以点击
- Javascript-获取一张用户的随机个人资料图片'的朋友在脸书上
- 无法使用formData数组一次上载5张图片
- 如何知道最后一张图片何时到达灯箱2
- 为什么我的 Jquery 轮播不会停留在最后一张图片上
- jQuery幻灯片,转到上一张图片
- 图库:仅一张图片作为缩略图
- PrettyPhoto 图库中的最后一张图片首先加载
- 如果输入为空,则显示一张图片或另一张图片
- 将一张或两张图片添加到jQuery Slider
- 一张图片的多个标题-点击链接一次查看一个
- Don'如果Galleria只有一张图片,则不显示缩略图
- 有没有一种方法可以让我在博客文章中提取第一张图片,并将其作为标题放在博客文章里
- 在ngFor循环中显示source.unsplash.com中的10张独特图片