首页 > Web开发 > 详细

js实现车轮的来回滚动

时间:2015-07-13 18:22:12      阅读:268      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!