关于语音动画加上JS点击控制的方式

来源：互联网发布：stddev sqlserver 编辑：程序博客网时间：2024/06/17 14:17

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes run {
0% {
background-position: -11px 0;
}
100% {
background-position: -190px 0;
}
}

@-webkit-keyframes run {
0% {
background-position: -11px 0;
}
100% {
background-position: -190px 0;
}
}

#test {
width: 100px;
height: 100px;
background: url(css/1231231.png) 0px 0 no-repeat;
background-size: cover;

}
</style>
</head>

<body>
<div id="test">

</div>
<button class="bf">播放</button>
<button class="tz">停止</button>

</body>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.spritely.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.bf').click(function () {
$("#test").sprite({ fps:2, no_of_frames: 4 ,});
})
$('.tz').click(function () {
$('#test').spStop(true)//返回第一帧
$("#test").destroy()//必须添加，结束整个动画，并且可以在播放的地方开启动画，其必须是ID
})

</script>
</html>

阅读全文

0 0