怎么实现点击图片渐变切换成另一个图片!

[复制链接]
查看11 | 回复0 | 2009-1-30 06:28:38 | 显示全部楼层 |阅读模式
要鼠标点击图片,并渐变切换成另一图片的代码。要全的噢。谢谢了噢。

                                                                                                用层将两张图叠在一起,其中一张当鼠标单击时渐渐透明不就行了吗..把楼下的代码改一下,就行了:<div style="position:absolute; left:0px; top:0px; z-index:1"><img id="img1" src="1.gif" border="0"></div><div style="position:absolute; left:0px; top:0px; z-index:2" id="up"><img id="img2" onclick=nextImg() src="1.gif" border="0"></div><script language="javascript"> var arrImg=new Array(\'1.gif\',\'2.gif\',\'3.gif\',\'4.gif\',\'5.jpg\',\'6.jpg\',\'7.jpg\',\'8.jpg\');var i=1; var nw=document.all.up;var opaValue=100;function nextImg(){         if(i==arrImg.length-1) return;        i++;        document.getElementById("img1").src=arrImg;        var num=setInterval(function(){opacity(num)},10);}function opacity(cnum){        if(opaValue>0){        nw.style.filter="alpha(opacity="+opaValue+")";        opaValue-=2;}        if(opaValue<=0){        nw.style.filter="alpha(opacity=100)";        document.getElementById("img2").src=arrImg;        clearInterval(cnum);        opaValue=100;}}</script>做好的效果,请看:http://tttl.gougou.cc/opacity/index.htm                                       
提问者对答案的评价:

                                                                                                <img id=imgFld onclick=nextImg()>
<script>
var arrImg=new Array(\'1.jpg\',\'2.jpg\',\'3.jpg\');
var i=0;
document.getElementById("imgFld").src=arrImg[0];
function nextImg() {
if(i==arrImg.length-1) return;
i++;
document.getElementById("imgFld").src=arrImg;
}
</script>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题

0

回帖

4882万

积分

论坛元老

Rank: 8Rank: 8

积分
48824836
热门排行