码迷,mamicode.com
首页 > Web开发 > 详细

js实现车轮的来回滚动

时间:2015-07-13 18:22:19      阅读:483      评论:0      收藏:0      [点我收藏+]

标签:

 

最近喜欢用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>

js实现车轮的来回滚动

标签:

原文地址:http://www.cnblogs.com/htuthf/p/4643398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!