菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小鸟启蒙(facesoho.com)</title> <style> #myDIV { margin:25px; width:550px; height:100px; background:orange; position:relative; font-size:20px; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {top:0px;} to {top:200px;} } @keyframes mymove { from {top:0px;} to {top:200px;} } </style> </head> <body> <p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p> <div id="myDIV" onclick="myFunction()">点我开始动画</div> <script> var x = document.getElementById("myDIV") // 使用 JavaScript 开始动画 function myFunction() { x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码 x.style.animation = "mymove 4s 2"; } // Chrome, Safari 和 Opera x.addEventListener("webkitAnimationStart", myStartFunction); x.addEventListener("webkitAnimationIteration", myIterationFunction); x.addEventListener("webkitAnimationEnd", myEndFunction); x.addEventListener("animationstart", myStartFunction); x.addEventListener("animationiteration", myIterationFunction); x.addEventListener("animationend", myEndFunction); function myStartFunction() { this.innerHTML = "animationstart 事件触发 - 动画已经开始"; this.style.backgroundColor = "pink"; } function myIterationFunction() { this.innerHTML = "animationiteration 事件触发 - 动画重新播放"; this.style.backgroundColor = "lightblue"; } function myEndFunction() { this.innerHTML = "animationend 事件触发 - 动画已经完成"; this.style.backgroundColor = "lightgray"; } </script> </body> </html>
运行结果