js实现旋转大风车
短信预约 -IT技能 免费直播动态提醒
相信大家都对风车这个东西感到不陌生,所以我们今天就要写一个大风车的案例.
这是一个动态网页,下面是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 class="lazy" data-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>
查看成品:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341