介于JS怎样写个动态的旋转风车
|
这篇文章主要讲解了“基于JS怎样写个动态的旋转风车”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。 这是一个动态网页，下面是css文件的代码，废话少说，上代码： <style> .fc{ animation:wm 2s infinite linear; } @keyframes wm { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } .rfc{ animation:wm1 2s infinite linear; } @keyframes wm1 { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } </style> 接下来是js的文件 <body> <div> <h3>我爱玩风车</h3> <img src="../img/logo.png" class="" alt="" id="img1"> <hr> <input type="button" value="开始" onclick="start1()"> <input type="button" value="停止" onclick="stop1()"> <input type="button" value="反转" onclick="reverse()"> <input type="button" value="转1圈" onclick="circle(1)"> 转<input type="text" size="1" value="" onblur="circle(this.value)">圈 </div> </body> <script> function circle(n){ //处于停止状态 if(img1.className==''){ start1() } //已经在转了 setTimeout(stop1,2000*n) } //反转 function reverse(){ img1.className='rfc' } //转起来 function start1() { img1.className='fc' } //停下来 function stop1() { img1.className='' } </script> 现在大家对于基于JS怎样写个动态的旋转风车的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
