这里需要注意的是:
- 使用 AlphaImageLoader 筛选器的元素必须有宽高,width:XXpx; height:XXpx;
- ie6下必须充值背景为none,_background:none
查看demo:http://www.css88.com/demo/circular-img/circular-img1.html
------------------------------------------------------------------------------------------------------------------------------------------
第二种:使用widgetfx的方法:
你可以在这里获取最新的widgetfx:http://code.google.com/p/widgetfx/source/browse/widgetfx.org/?r=122
html代码:
<div id="circular-box" class="clearfix">
<ul>
<li><a href="http://www.sodao.com"><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
<li><a href="http://www.sodao.com"><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
<li><a href="http://www.sodao.com"><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>
</ul>
</div>
|
CSS代码:
#circular-box{ margin: 50px;}
#circular-box li{ float:left; margin:0 20px; position:relative}
#circular-box li img{display:block}
#circular-box li span{position:absolute; top:0; left:0;width:200px; height:200px; background:url(circular.png) no-repeat; behavior:url("iepngfix.htc"); cursor:pointer}
|
这里需要注意的是:
- 页面头部需要引用iepngfix_tilebg.js;
- 在透明图片的元素上加:behavior:url(”iepngfix.htc”);
查看demo:http://www.css88.com/demo/circular-img/circular-img.html
另:校内最新的该效果制作有的特别,在支持html5的浏览器上使用了Canvas,IE下 |