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

最新推荐文章于 2024-03-01 20:42:39 发布

小小前端

最新推荐文章于 2024-03-01 20:42:39 发布

阅读量642

点赞数

分类专栏： HTML+css

本文链接：https://blog.csdn.net/qq_35590255/article/details/75045349

版权

HTML+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>