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毫秒 添加动画才有效果