使用jquery使图像转角

Question

我正在使用jquery.imgr.js在php文件中进行图像转角。

我有以下代码从数据库生成图像。

<?php 
for($i=1;$i<=5;$i++)
{
?>
<img id="hero" src="art/<?=$getArtistsId[$i];?>"  height="75px" width="98px"/>
<?php
}
?>

下面是使图像转角的脚本

  <script type="text/javascript">
    $(document).ready(function(){
    $("#hero").imgr({size:"2px",radius:"10px"});
    })
    </script>

它可以工作但只能使第一个图像转角不是全部。

1. 如何使所有图像角落圆形？
2. 还有其他任何有效的方法来制作圆角图像。

由于

Answer 1

ID是唯一的，您要为许多元素设置ID，因此当您将imgr脚本设置为在具有该ID的元素上运行时，它只会匹配一个ID。类可以用在许多元素上。所以而不是：

<img id="hero" src="art/<?=$getArtistsId[$i];?>"  height="75px" width="98px"/>

使用：

<img class="hero" src="art/<?=$getArtistsId[$i];?>"  height="75px" width="98px"/>

然后对于javascript使用类似于CSS的class选择器：

$(".hero").imgr({size:"2px",radius:"10px"});

Answer 2

不要在循环中添加id，而是添加公共class。

<img class="hero" src="art/<?=$getArtistsId[$i];?>" height="75px" width="98px"/>

$(".hero").imgr({size:"2px",radius:"10px"});

Answer 3

添加课程后，为什么不呢？...

.hero img{
    border-radius: 10px;
}