刚刚在腾讯女性频道上看到一个很酷的图片渐变轮换效果·····于是乎····抠下来了···分享···

<style type="text/css"> .woon{border:1px solid #fff;} .wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);} </style> <script language="JavaScript" type="text/JavaScript"> <!-- window.onerror = function(){return true} function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> <table width=252 border=0 align=center cellPadding=0 cellSpacing=0 background="http://img1.qq.com/lady/pics/3931/3931550.jpg"> <tr> <td height="470" align="center"> <div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:240px; HEIGHT:454px; border:1px solid #D85C8A"> <div style="display:block"><A href="http://lady.qq.com/a/20071007/000003.htm" target=_blank><img onmouseover=clearAuto(); onmouseout=setAuto() height=454 src="http://mat1.qq.com/lady/images/index/2007/10/07/hot1.jpg" width=240 border=0></A></div> <div style="display: none"><a href="http://lady.qq.com/a/20071007/000009.htm" target="_blank"><img onmouseover=clearAuto(); onmouseout=setAuto() height=454 src="http://mat1.qq.com/lady/images/index/2007/10/07/hot2.jpg" width=240 border=0></a></div> <div style="display: none"><A href="http://lady.qq.com/a/20071007/000005.htm" target=_blank><img onmouseover=clearAuto(); onmouseout=setAuto() height=454 src="http://mat1.qq.com/lady/images/index/2007/10/07/hot3.jpg" width=240 border=0></A></div> <div style="display: none"><a href="http://lady.qq.com/a/20071007/000006.htm" target=_blank><img onmouseover=clearAuto(); onmouseout=setAuto() height=454 src="http://mat1.qq.com/lady/images/index/2007/10/07/hot4.jpg" width=240 border=0></a></div> </div></td> </tr> <tr> <td height=99 valign="top"> <table border=0 align=center cellPadding=0 cellSpacing=1 id=num> <tr> <td class=woon onmouseover=clearAuto();onclick=Mea(0); onmouseout=setAuto() ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot01.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000003.htm','','')"></td> <td class=wooff onmouseover=clearAuto(); onclick=Mea(1); onmouseout=setAuto() ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot02.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000009.htm','','')"></td> <td class=wooff onmouseover=clearAuto(); onclick=Mea(2); onmouseout=setAuto() ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot03.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000005.htm','','')"></td> <td class=wooff onmouseover=clearAuto(); onclick=Mea(3); onmouseout=setAuto() ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot04.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000006.htm','','')"></td> </td> </tr> </table> <script> var n=0; var showNum = document.getElementById("num"); function Mea(value){ n=value; setBg(value); plays(value); } function setBg(value){ for(var i=0;i<4;i++) if(value==i){ showNum.getElementsByTagName("td")[i].className='woon'; } else{ showNum.getElementsByTagName("td")[i].className='wooff'; } } function plays(value){ with (fc){ filters[0].Apply(); for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none"; filters[0].play(); } } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("auto(n)", 5000)} function auto(){ n++; if(n>3)n=0; Mea(n); } function sub(){ n--; if(n<0)n=3; Mea(n); } setAuto(); </script> </body> </html>
 提示：您可以先修改部分代码再运行

n

不错哦。。呵呵。。支持一下，谢谢分享

不错哦！就是速度稍微慢了点！

在FF下无效，呵

IE中能出来就完了。。我是支持单浏览器支持的。。适用于功能开发。。

不错,也发现在FF下无效

不错不错!
发现4张图,第1张鼠标移上去不点,上面的图马上转换成它了,其它的要点击才能马上转换

效果不错，学习

楼主好样的

用了CSS的滤镜（貌似alpha），所以FF是没效果的

这个效果看起来不错啊，比起平常所见图片轮显的就有很大的改观了！！
顶下先！！

能不能修改下 兼容FF

真的很好的效果啊，我收藏了，谢楼主分享！

那个高手修改下，搞成兼容FF的!!

bu cuo ..

伟大的奉献精神，支持

引用:

原帖由 yd514 于 2007-10-20 09:16 发表
那个高手修改下，搞成兼容FF的!!

这个效果是用绿境做的，据我了解ff还不支持绿境

很好.

ff的确无效，楼上几位说的没错

现在的图片轮换全用FLASH的啦~纯代码的基本淘汰了!

看个人喜欢了！反正这个我不喜欢

一般般，学网页的前十节课里面好像就有学过啦

谢一个先

正在找这个那，谢谢了，

有那个asp的吗，我想从数据库里提取数据来显示？

FF下无效

哪里有FLASH的提供一下吧。谢谢了。

能不能用flash作成这样的效果?

在FLASH当然可以做出这样的效果，只不过，用代码较方便一些压瓦机。

多谢楼主~~~~~~~~~~~~~~~~~~~~