炫意html5
最早CSS3和HTML5移动技术网站之一

JQuery和CSS3给图片制作圆角

圆角,这东西在Web页面应用方面,大家在熟悉不过的东西了,以前是使用图片来制作,但现在敢于挑战的同学也在尝试使用CSS3的border-radius来制作圆角。在前面,我在《CSS3的圆角Border-radius》专门介绍过CSS3的border-radius属性。感兴趣的同学可以去学习一下,今天和大家要讨论的不是如何使用CSS3的border-radius,而是要和大家一起讨论如何使用border-radius属性,能让image具有圆角效果。在《CSS3的圆角Border-radius》就有提出过在一些浏览器中,border-radius用在图片上根本不起效果,我们来看一下效果:

左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果,我们可以看得出,图片根本就没有圆角效果,右图是在Firefox4.0下的效果,低于这个版本的和左图一样效果,如果需要达成一致效果,我们就需要使用别的方法来实现。这也正是今天我要和同学们一起探讨的东西——用jQuery和CSS3的border-radius让图片具有圆角效果。

在开始之前,大家先简单的了解一下border-radius的使用,如下图所示:

由于浏览器支持情况不一致,所以在实际应用中还是需要带上各自的前缀,如:

-moz-border-radius: none | {1,4} [/ {1,4} ]?
 -webkit-border-radius: none | {1,4} [/ {1,4} ]?
 border-radius: none | {1,4} [/ {1,4} ]?

上面简单的回忆了一下,border-radius的使用,那么现在回到我们今天的正题:使用CSS3的border-radius让图片具有圆角效果,如下图所示:

前面也简单的提过一下,单独使用border-radius属性来给图片增加圆角效果,在Safari5.0、Google Chrome 10.0、Opera11.1和Firefox4.0以下的现代浏览器中不会具有圆角效果,或者圆角会残缺不全,如图所示:

那么如何来解决呢?其实很简单,我们只需要通过jQuery动态的给图片外增加一个标签,比如说:span标签,并把图片转换成新加span标签的背景图,最后把图片隐藏不显示,这样在给span标签应用圆角border-radius就能实现圆角统一的效果了。具体我们来看一个实例,假如我们需要给一个图片增加圆角:

<img src="images/thumb.jpg" width="70" height="70" class="imgRound" alt="Thumb" / >

第一步:通过jquery在img外增加一个标签:

<span><img src="images/thumb.jpg" width="70" height="70" class="imgRound" alt="Thumb" / ></span>

第二步:通过jquery将img转换成span的背景图

<span class="imgRound" style="background:url("images/thumb.jpg") no-repeat center center; width:70px; height: 70px;">
 <img src="images/thumb.jpg" width="70" height="70" class="imgRound" alt="Thumb" / >
</span>

三步:将图片img隐藏,隐藏图片你可以使用”opacity:0″或”display:none”或”visibility:hidden”来实现,我个人觉得使用”opacity:0″比其他方法更好,这样可以让图片进行下载或复制。

<span class="imgRound" style="background:url("images/thumb.jpg") no-repeat center center; width:70px; height: 70px;">
<img src="images/thumb.jpg" width="70" height="70" class="imgRound" alt="Thumb" style="opacity:0" / >
</span>

上面都是实现的原理,关键地方是在这里,如何使用jQuery让上面的过程都逐步实现,具体的我们看下面的jQuery代码:

<script type="text/javascript">
 $(document).ready(function(){
$("imgRound").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' +
$(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height:
 ' + $(this).height() + 'px;" ></span>';
});
$(this).css("opacity","0");
 });
});
</script>

最后一步就是应用样式了:

.imgRound {
display: inline-block;
border: 10px solid green;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

因为我们加的是span标签,他是行内元素,不具有高和宽的属性设置,所以在样式中需要加上“display:inline-block”或“dispaly:block”,将行内元素转为行内块或块元素,这样才会有效果,如:

上面我们是针对选定的图片操作,如果你需要对所有图片进行操作,可以将上在的代码稍为改一下:

$("img").load(function(){
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' +
$(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height:
 ' + $(this).height() + 'px;"></span>';
 });
$(this).css("opacity","0");
 });

这样实现图片的圆角统一是不是很方便呀,感兴趣的自己尝试一下,最后还有一点需要提醒大家一点,css3中不单只border-radius应用在img会在部分浏览器中无效,其实另一个属性,box-shadow的内阴影(inset)应用在img上在部分浏览器下也会无效果的,其解决办法也可通过这个办法来实现。

转自:w3cplus

炫意HTML5 » JQuery和CSS3给图片制作圆角

CSS3教程HTML5教程