以下代码在除 Google Chrome(Safari 未测试)之外的所有内容中都可以正常工作。我认为问题出在 addEventListener 注册中,这需要...
**e.addEventListener("animationiteration", listener, false);**
触发bmViewer()函数
HTML:
<div id = **"bmImageDiv"** style = "top:0; left:0; right:0; height:350px; text-align:center; position:absolute; margin:.5em; border-bottom:solid .10em green; resize:both;">
<img id = "bmIcon" src = "http://greenfloyd.org/images/bookmark.png" alt="bm icon" height = "24" width = "24" title = "poster,timestamp" style = "top:0; left:0; height:25px; width:25px; position:absolute;">
<a href = "javascript:void(0)" id = "bmViewerImageLink" rel = "enclosure" type = "image/*" target = "_blank" title = "click to view image at original size.">
<img id = "bmViewerImageSrc" src = "http://greenfloyd.org/images/bookmark.png" alt="bm image" height = "95%" width = "95%">
</a>
</div>
js:
window.onload=function()
{
var e = document.getElementById(**"bmImageDiv"**);
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
.
.
.
}
function listener(e)
{
switch(e.type)
{
case "animationstart":
actionLog("Started: elapsed time is " + e.elapsedTime);
break;
case "animationend":
actionLog("Ended: elapsed time is " + e.elapsedTime);
break;
case "animationiteration":
actionLog("New loop started at time " + e.elapsedTime);
var index = document.getElementById("bmNext").value;
bmViewer(index);
break;
default:
actionLog(e.type+", "+document.getElementById"bmImageDiv").style.animationPlayState);
document.getElementById("bmImageDiv").className = "play";
}
}
CSS3 动画:
@keyframes bmview { from {opacity:0.0; } to {opacity:1.0;} }
@-webkit-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
@-moz-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
@-o-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
.paused
{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
.play
{
animation: bmview 7s linear 0s infinite;
-webkit-animation: bmview 7s linear 0s infinite;
-moz-animation: bmview 7s linear 0s infinite;
-o-animation: bmview 7s linear 0s infinite;
-webkit-animation-play-state:running;
-moz-animation-play-state:running;
-o-animation-play-state:running;
animation-play-state:running;
}