最近喜欢用js做车轮的来回滚动,简单的js动画分享给大家。有什么建议记得说出来大家一起讨论哦!效果图如下:
源代码:
<style>
#pic1{
width:20px;
height:20px;
background: red;
}
</style>
</head>
<body>
<div id="pic1">
</div>
</body>
<script>
window.onload =function(){
var ab=document.getElementById("pic1");
var left=0;
var fangxiang="left";
var isrun=false;
if(isrun){
clearInterval(window.id);
isrun=false;
}else{
window.id=setInterval(function(){
if(left>500){
fangxiang="right";
}if(left<=0){
fangxiang="left";
}if(fangxiang=="left"){
left+=10;
var logTime = setInterval(function(){
ab.style.transform = "rotate(" + left + "deg)";
},1);
}else{
left-=10;
}
ab.style.marginLeft=left+"px";
},100);
isrun=true;
}
}
</script>