图片幻影效果
效果图片：
Code<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
var NowFrame = 1;
var MaxFrame = 2;
var bStart = 0;
function fnToggle()
{
var next = NowFrame + 1;
if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()', 1000);
return;
}
else
{
oTransContainer.filters[0].Apply();
document.images['oDIV'+next].style.display = "block";
document.images['oDIV'+NowFrame].style.display = "none";
oTransContainer.filters[0].Play(duration=4);
if(NowFrame == MaxFrame)
NowFrame = 1;
else
NowFrame++;
}
setTimeout('fnToggle()', 6000);
}
fnToggle();
</script>
<div id="oTransContainer" style="filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward');
width: 100px; height: 75px">
<img id="oDIV1" style="border-right: black 0px solid; border-top: black 0px solid;
display: yes; border-left: black 0px solid; border-bottom: black 0px solid" height="75"
src="mei.jpg" width="100" border="0">
<img id="oDIV2" style="border-right: black 0px solid; border-top: black 0px solid;
display: none; border-left: black 0px solid; border-bottom: black 0px solid"
height="75" src="mm.jpg" width="100" border="0">
</div>
</form>
</body>
</html>
如果本文的描述的方法或内容有问题，请给我留言。
浙公网安备 33010602011771号