[鼠标移至会发生梦幻般变化的图片特效]共3步
1、将以下代码加入<head></head>之间
<style>
.filter1 {filter:revealTrans(Duration=2.0,Transition=23)}
</style>
2.在<body>语句中加入:onload="startChange()"
例如：<body onload="startChange()">
3.将以下代码加入<body></body>之间
<script language="JScript">
var cache1, cache2, vache3;
cache1 = new Image();
cache1.src = "images/3.jpg";
cache2 = new Image();
cache2.src = "images/4.jpg";
cache3 = new Image();
cache3.src = "images/2.jpg";
var i = 0;
var j = 0;
var l = 0;
function changeImgSrc(imgsrc,dur,trans)
{
idLogo.className = "filter1";
idLogo.filters[0].Apply();
idLogo.filters.revealTrans.transition=trans;
idLogo.filters.revealTrans.duration=dur;
idLogo.src = imgsrc;
idLogo.filters[0].Play();
}
function startChange()
{
t = setInterval("changeImg()",10000);
}
function changeImg()
{
var e = idLogo.src;
i++;
j = i % 3;
if (j == 0) changeImgSrc("images/4.jpg",1,23);
if (j == 1) changeImgSrc("images/3.jpg",1,23);
if (j == 2) changeImgSrc("images/2.jpg",1,23);
i = (i > 30000) ? 0 : i;
}
function doOver()
{
var e = event.srcElement;
l = (l == 0) ? 1 : 0;
if (l == 0)
{
if (j == 1) changeImgSrc("images/3.jpg",0.5,12);
if (j == 2) changeImgSrc("images/2.jpg",0.5,12);
if (j == 0) changeImgSrc("images/4.jpg",0.5,12);
} else
{
if (j == 1) changeImgSrc("images/4.jpg",0.5,12);
if (j == 2) changeImgSrc("images/2.jpg",0.5,12);
if (j == 0) changeImgSrc("images/3.jpg",0.5,12);
}
clearInterval(t);
}
function doOut()
{
var e = event.srcElement;
if (j == 1) changeImgSrc("images/4.jpg",0.5,12);
if (j == 2) changeImgSrc("images/3.jpg",0.5,12);
if (j == 0) changeImgSrc("images/2.jpg",0.5,12);
t = setInterval("changeImg()",10000);
}
</script>
<img id="idLogo" src="images/2.jpg" width=150 height=120 onmouseover="doOver()" onmouseout="doOut()">
您现在的位置： 108设计网 >> 网页制作 >> 网页特效 >> 网页制作正文
