作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我有一个包含三组图像的 HTML 页面。我希望每组中的每张图片都保持可见 5 秒,然后一起淡出,当所有三张都不可见时,再一起淡入。然后该过程再次开始。我试图在不使用 JQuery 的情况下执行此操作。我写了一个 JavaScript 来做这件事,它工作了,但过了一会儿奇怪的事情发生了。图像停止淡出、淡入或过早停止。这是相关的 HTML:
<body onload="HideAll(fade1Image2, fade1Image3, fade1Image4, fade2Image2,
fade2Image3, fade2Image4, fade3Image2, fade3Image3, fade3Image4);
SetVariables(4,4,4);">
<div id="fade1Image1" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/PowerStation1.jpg" alt="Power Station 1" />
</div>
<div id="fade1Image2" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/PowerStation2.jpg" alt="Power Station 2" />
</div>
<div id="fade1Image3" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/FenceLine1.jpg" alt="Fence Line 1" />
</div>
<div id="fade1Image4" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/FenceLine2.jpg" alt="Fence Line 2" />
</div>
<div id="fade2Image1" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal1.jpg" alt="LNG Terminal 1" />
</div>
<div id="fade2Image2" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal2.jpg" alt="LNG Terminal 2" />
</div>
<div id="fade2Image3" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal3.jpg" alt="LNG Terminal 3" />
</div>
<div id="fade2Image4" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal4.jpg" alt="LNG Terminal 4" />
</div>
<div id="fade3Image1" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/AirPort1.jpg" alt="Air Port 1" />
</div>
<div id="fade3Image2" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/AirPort2.jpg" alt="Air Port 2" />
</div>
<div id="fade3Image3" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/T1_Tracker.jpg" alt="TI Tracker 1" />
</div>
<div id="fade3Image4" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/Targets_Tracked_no_alarm.jpg" alt="TI Tracker 2" />
</div>
这是 JavaScript:
var TimeToFade = 1000.0;
var maxCount;
var count;
function SetVariables()
{
maxCount = new Array(arguments.length);
count = arguments.length + 1;
for (var x = 0; x < arguments.length; x++)
{
maxCount[x] = arguments[x];
}
}
function fade(counter)
{
var eid, countx;
for (var x = 1; x < count; x++)
{
countx = counter % maxCount[x-1];
if (countx == 0)
countx = maxCount[x-1];
eid = "fade" + x + "Image" + countx;
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
if (x == 3)
setTimeout("animateFade(" + new Date().getTime() + ",'" + counter + "')", 33);
}
}
}
function animateFade(lastTick, counter)
{
var eid, countx;
for (var x = 1; x < count; x++)
{
countx = counter % maxCount[x-1];
if (countx == 0)
countx = maxCount[x-1];
eid = "fade" + x + "Image" + countx;
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
if (element.FadeState == 2 && x == count-1)
{
setTimeout(function(){fade(counter)}, 5000);
hidetext(TextBlock1, TextBlock2, Text2Block1, Text2Block2, Text3Block1, Text3Block2);
}
else if (x == count-1)
{
counter++;
fade(counter);
}
if (x == count-1)
return;
}
else if (element.FadeTimeLeft > elapsedTicks)
{
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
}
}
setTimeout("animateFade(" + curTick + ",'" + counter + "')", 33);
}
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
arguments[i].style.opacity = 0;
arguments[i].style.filter = 'alpha(opacity = 0)';
arguments[i].FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}
我看不出我做了什么导致了这个错误;任何帮助将不胜感激。
要查看运行中的代码,请单击 here .
最佳答案
这并没有真正回答问题,但我从头开始重写了 javascript,它似乎可以工作。因此,为了完整起见,这里是:
var Count = new Array(1, 1, 1);
var MaxCount = new Array(8, 6, 5);
var FadeState = "out";
var FadeTime = new Array(100, 100, 100);
function Fade()
{
for (var x = 0; x < 3; x++)
{
var id = "fade" + (x+1) + "Image" + Count[x];
var element = document.getElementById(id)
if (FadeState == "out")
{
if (FadeTime[x] > 0)
{
FadeTime[x]-= 5;
element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')';
element.style.opacity = FadeTime[x]/100;
}
else
{
Count[x]++;
if (Count[x] > MaxCount[x])
Count[x] = 1;
if (x == 2)
FadeState = "back";
}
}
else
{
if (FadeTime[x] < 100)
{
FadeTime[x]+= 5;
element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')';
element.style.opacity = FadeTime[x]/100;
}
else
{
if (x == 2)
FadeState = "pause";
}
}
}
switch (FadeState)
{
case "back":
FadeState = "in";
Fade();
break;
case "pause":
FadeState = "out";
setTimeout(function(){Fade()}, 5000);
break;
default:
setTimeout(function(){Fade()}, 20);
}
}
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
var element = document.getElementById(arguments[i]);
element.style.opacity = 0;
element.style.filter = 'alpha(opacity = 0)';
}
setTimeout(function(){Fade()}, 5000);
}
关于Javascript Fade 产生意想不到的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12485048/
我是一名优秀的程序员,十分优秀!