1

我编写了一个 jquery 插件来使 div 自动滚动，我使用函数 setInterval 使 div 停止一段时间然后继续滚动。这是代码

(function($){
"use strict";
function scrolltotop(obj,height,speed){
var ch=parseInt($(obj).css("margin-top"))+29;
    $(obj).parent().find(".moving").remove();
    $(obj).after($(obj).clone().addClass("copy"));
    $(obj).addClass("moving").removeClass("copy").animate({
        "margin-top":-27
    },speed);
    loop=setInterval(function(){
        ch+=27;
        if(ch < height+27){
            $(obj).animate({
                "margin-top":-ch
            },speed,function(){
            loop;
            })      
        }else{
            clearInterval(loop);
            scrolltotop($(obj).next(".copy"),height,speed); 
        }
    },4000)
}               
$.fn.extend({ 
    autoscroll: function(options) {  
        var defaults = {  
            speed: 1000,  
            scroller : '#scroller',  
            scroller_container : '#scroller_container'  
        }    
        var options =  $.extend(defaults, options); 
        var height=$(options.scroller).height();
        var stop=stopscroll();
        //console.log(height)

        scrolltotop(options.scroller,height,options.speed);
    }, 
});  
}(jQuery));
$("#list2").autoscroll({scroller:"#list2",scroller_container:"#container_2"});

它运作良好，但不知道如何在我初始化插件后使 div 停止滚动。

4

1 回答 1

1

如果我理解你想逐行移动 div 滚动等待 4s 直到你到达终点的问题。

我简化了你的 scrolltotop 功能

function scrolltotop(obj,height,speed){

    var ch = 0;        
    var loop = setInterval(function(){  

        ch+=27;
        $('#container_2').animate({
            scrollTop: ch
        }, speed);

        if(ch >= height){
            console.log('Out of loop');    
            clearInterval(loop);
        }

    },4000);    
}

您可以在这里看到一个工作示例http://jsfiddle.net/jCw3y/ 也许您可以调整我的代码以在您的插件中使用它。

（您使用的是“use strict”。请记住始终声明 javascript 变量。var loop、var ch 等）

要手动停止，您可以保存 intervalId 并在需要时调用 clearInterval。检查这个例子：http: //jsfiddle.net/ccR4t/

最后，另一个纯 jquery 示例。使用动画和停止功能来控制所有。

(function ($) {
    "use strict";

    function scrolltotop($container, options) {
        $container.animate({
            scrollTop: options.scrollerHeight
        }, options.speed, function () {
            console.log('Animation completed');
        });
    }

    $.fn.extend({
        autoscroll: function (options) {

            var $me = this;
            var defaults = {
                speed: 1000,
                scroller_container: '#scroller_container',
                scroller: '#list2'
            }
            var options = $.extend(defaults, options);
            options.scrollerHeight = $(options.scroller).height();

            scrolltotop($me, options);
        },
    });
}(jQuery));

$("#container_2").autoscroll({
    scroller: '#list2',
    speed: 10000
});

// stop scroll after 4 sec
setTimeout(function () {
    $('#container_2').stop();
    alert('scroll manually stopped')
}, 4000);

工作示例：http: //jsfiddle.net/c8Ns8/

于 2013-08-23T07:28:13.643 回答