jquery控制css3动画播放 长按图片缩小 松开停止缩小 再长按继续缩小….如此循环下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.suoxiaoxiaoguo1 {
animation: scale5 7s forwards;
-webkit-animation: scale5 7s forwards;
}
@-webkit-keyframes scale5 {
0% {
}
100% {
-webkit-transform: scale(0.5, 0.5);
opacity: 1;
}
}
@keyframes scale5 {
0% {
}
100% {
-webkit-transform: scale(0.5, 0.5);
opacity: 1;
}
}
.pause {
animation-play-state: paused;
}
</style>
</head>
<body>
<img class="ss" style="width:100%; height:100%; "
src="http://wx.bocweb.cn/peng/xiangsheng_yjdd/resource/assets/library/1.jpg"/>
<script type="text/javascript" src="/index/js/jquery.min.js"></script>
<script>
$(function () {
$('body').on('touchstart', function () {
$('.ss').removeClass('pause');
$('.ss').addClass('suoxiaoxiaoguo1');
})
$('body').on('touchend', function () {
$('.ss').addClass('pause');
})
})
</script>
</body>
</html>
ps:如果要重置动画可以用
$(‘.ss’).removeClass(‘suoxiaoxiaoguo1’); setTimeout(function(){ $(‘.ss’).addClass(‘suoxiaoxiaoguo1’); },100);
remove以后要过100毫秒 添加动画才有效果