您的位置：首页 > Web前端 > CSS

通过JS控制CSS实现连帧动画

2012-06-20 18:38 615 查看

         网页类Web游戏开发中常常需要实现连帧的动画效果，但是又不方便通过GIF图片去替代，比如动物的移动就是一种。

         下面代码是一个简单的连帧动画的Demo。

<html>
<head>
<meta charset="UTF-8">
<title>动画demo</title>
<style type="text/css" rel="stylesheet">
body div{
background-image:url(image/donghua.png); background-repeat:no-repeat}
.step1{background-position:0px 0px;}
.step2{background-position:-111px 0px;}
.step3{background-position:-222px 0px;}
.step4{background-position:-333px 0px;}
.step5{background-position:-444px 0px;}
.step6{background-position:-555px 0px;}
.step7{background-position:-666px 0px;}
.step8{background-position:-777px 0px;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var n=0;
//持续设置图片旋转角度，使其显示旋转动画
setInterval(function(){
$("#donghua").css({"position":"relative","left":-n+"px","background-position":n+"px 0px"});
n=(n>-777)?n-111:-111;
},300);
</script>
</head>
<body style="background-color:black;">
<div class="step1" style="width:111px;height:57px;"></div>
<div class="step2" style="width:111px;height:57px;"></div>
<div class="step3" style="width:111px;height:57px;"></div>
<div class="step4" style="width:111px;height:57px;"></div>
<div class="step5" style="width:111px;height:57px;"></div>
<div class="step6" style="width:111px;height:57px;"></div>
<div class="step7" style="width:111px;height:57px;"></div>
<div class="step8" style="width:111px;height:57px;"></div>
<hr color="red">
<div id="donghua" style="width:111px;height:57px;">
</div>
</body>
</html>


最终效果如图所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css class div stylesheet function html
相关文章推荐
新的分享
章节导航