Question

是仿今日头条的点赞效果

应该是因为使用了setInterval(）方法，循环执行，而且执行的次数特别多；会执行的越来越慢；悬赏金不多，还请大神帮忙，同是郑州的老乡，多谢多谢

Answer 1

(function(){

var imgArr = ['run1.png','run2.png','run3.png','run4.png','run5.png','run6.png','run7.png','run8.png','run9.png','run10.png','run11.png','run12.png','run13.png','run14.png','run15.png','run16.png','run17.png','run18.png','run19.png'];
var timer = null;
var windowW = window.screen.width;
var windowH = window.screen.height;
var num = 0;
var $span = $('.onbox span');
var flag = true;
var nowTime,endTime;
//var time = 0;

//鼠标按下点击赞出现
$('.wrap_r').on('touchstart',function(){
nowTime = new Date().getTime();
if(nowTime - endTime < 800){
flag = true;
}
if(flag){
$('.wrap_r i').addClass('active');
flag = !flag;
}else{
$('.wrap_r i').removeClass('active');
flag = !flag;
return;
}
$('.onbox').show();
timer = setInterval(function(){
num++;
for(var i=0; i<4; i++){
//获取一个从0-18的随机数
var randomNum = parseInt( Math.random()*19 );
//获取一个随机距离
var ranIndex = Math.random();
var minWDis = parseInt( -ranIndex*windowW + windowW * 0.9 ); //随机X
var minHDis = parseInt( -ranIndex*windowH * 0.8 + windowH * 0.2 ); //随机Y
var ranDeg = parseInt( ranIndex * 360 ); //随机度数
var $li = $('<li><img src="./images/'+ imgArr[randomNum] +'" alt=""></li>');
$('.imgbox').append($li);
$li.animate({
'transform': 'rotate('+ ranDeg +'deg) translateX('+ minHDis +'px) translateY('+ minWDis +'px)'
},500,function(){
$(this).hide();
});
};
$span.html(num);
if(num>20){
$('#wrap .wrap_r .onbox em').css({
"background" : "url(./images/Great.png) no-repeat",
"backgroundSize" : "cover"
});
}
if(num>60){
$('#wrap .wrap_r .onbox em').css({
"background" : "url(./images/OMG.png) no-repeat",
"backgroundSize" : "cover"
});
}
},100);
});

//鼠标抬起
$('.wrap_r').on('touchend',function(){
endTime = new Date().getTime();
$('.onbox').hide();
$('.imgbox').empty();
clearInterval(timer);
});
})();

Answer 2

的点赞效果