js+CSS实现图片转动 – 山猫的博客

工作需要实现一个齿轮在转动的效果，不用flash

现在基本上不用flash了。苹果之类的设备不支持flash

原本想用html5和js后来想到用css+js应该也可以所以我就试了一下

代码如下

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="jquery.min.js" type="text/javascript"></script>
<title>chilun zhuanzhuan</title>
<style>
#shanmao{ background:url(chilun.png) no-repeat; height:44px; width:44px;}
#shanmao1{ background:url(chilun.png) -44px 0px no-repeat; height:44px; width:44px;}
#shanmao2{ background:url(chilun.png) -88px 0px no-repeat; height:44px; width:44px;}
#shanmao3{ background:url(chilun.png) -132px 0px no-repeat; height:44px; width:44px;}
#shanmao4{ background:url(chilun.png) -176px 0px no-repeat; height:44px; width:44px;}
#shanmao5{ background:url(chilun.png) -220px 0px no-repeat; height:44px; width:44px;}
#shanmao6{ background:url(chilun.png) -264px 0px no-repeat; height:44px; width:44px;}
#shanmao7{ background:url(chilun.png) no-repeat; height:44px; width:44px;}
</style>
</head>

<div class="a">begin</div>
</div>
<script>
var i=1;
var c;
function shanmao(){
$(".a").html(i);
$(".shanmao").attr("id","shanmao"+i);
if(i<7){
i=i+1;
}else{
i=0;
i=i+1;
}
setTimeout("shanmao()",100);
}
$(document).ready(function(){
$(".a").click(function(){
shanmao();
//window.setInterval(shanmao,320);
});

//alert(‘hello!’);

});
</script>

</body>
</html>

[/code]

其实用纯js就可以实现，我这里用了jquery，因为我习惯了一些jquery代码

这里有一个循环使用shanmao()这个方法。延迟时间是100毫秒

这里的时间可以自己调整，就可以调整转动的速度了

主要是用不同的css实现齿轮的不同角度

用js让它动起来

点击begin按钮后就开始转动。

可以点击这里下载demo

ps:这里分享两个js动画实例，让你思维更加开阔，举一反三！ demo下载1 demo下载2

下一个实例： css3+js实现动画效果，更简单更方便！

“js+CSS实现图片转动”的一个回复