我写了一个小代码，它从屏幕顶部向下滑动图像。我有一个暂停按钮来清除超时。但是我无法停止 JS 动画并从停止的地方继续。
Code :
$.fn.pSlide = function(options) {
var icount = 0,interval;
var isPaused = false;
documentHeight = $('.image-container').height(),
documentWidth = $('.image-container').width(),
imageHeight = 250;
imageWidth = 250;
defaults = {
minSize : 5,
maxSize : 15,
newOn : 8000, //controls duration of each element
},
options = $.extend({}, defaults, options);
$('#control-btn').click(function() {
window.clearInterval(interval);
});
interval = window.setInterval(function() {
if(!isPaused) {
var $elm = $('.image-container img').eq(icount);
var startPositionLeft = Math.random() * documentWidth - imageWidth ,
startOpacity = 0.5 + Math.random(),
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + (Math.random() * 15000)+5000, //controls the speed of transition
rotateValue = Math.random();
if(startPositionLeft<imageWidth) {
startPositionLeft = imageWidth;
}
if(rotateValue<=0.5) {
rotateValue = 0;
}else{
rotateValue *= 10;
rotateValue *= Math.cos(Math.PI * Math.round(Math.random())); //cos(0) = 1; cos(PI) = -1
}
if(icount==20)
icount=0;
else
icount++;
$elm
// .clone()
// .appendTo($('.image-container'))
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'-webkit-transform': 'rotate(' + rotateValue +'deg)',
'-moz-transform': 'rotate(' + rotateValue +'deg)',
'-o-transform': 'rotate(' + rotateValue +'deg)',
'-ms-transform': 'rotate(' + rotateValue +'deg)',
'zoom' : 1
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).css({'top':'-250'+'px' , '-webkit-transform': 'rotate(0)'});
}
);
}
},options.newOn);
};