使用 Javascript 代码连续滚动 div 的按钮

发布于 2024-12-06 10:58:50 字数 3459 浏览 0 评论 0原文

在网上找到了这段代码。想要修改它,使其在鼠标按钮按下时连续滚动div,并在鼠标按钮抬起时停止滚动。我尝试了这个:

  • 从单击事件更改为鼠标按下事件。那没有做到。
  • 在函数内添加了对同一函数的调用。那也没有做到。

我应该在此函数中修改什么才能使鼠标按下时连续滚动?

(function ($) {
    var vscrollid = 0;
    $.fn.vScroll = function (options) {
        var options = $.extend({}, { speed: 500, height: 300, upID: "#up-arrow", downID: "#bottom-arrow", cycle: true }, options);

        return this.each(function () {
            vscrollid++;
            obj = $(this);
            var newid = vscrollid;

            obj.css("overflow", "hidden");
            obj.css("position", "relative");
            obj.css("height", options.height + "px");
            obj.children().each(
                function (intIndex) {
                    $(this).addClass("vscroll-" + vscrollid + "-" + intIndex);
                });


            var itemCount = 0;

            $(options.downID).click(function () {
                var nextCount = itemCount + 1;
                if ($('.vscroll-' + newid + '-' + nextCount).length) {
                    var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight();
                    itemCount++;
                    $("#vscroller-" + newid).animate({
                        top: "-=" + divH + "px"
                    }, options.speed);
                }
                else {
                    if (options.cycle) {
                        itemCount = 0;
                        $("#vscroller-" + newid).animate({
                            top: "0" + "px"
                        }, options.speed);
                    }
                }
            });

            $(options.upID).click(function () {
                var prevCount = itemCount - 1;
                if ($('.vscroll-' + newid + '-' + prevCount).length) {
                    itemCount--;
                    var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight();
                    $("#vscroller-" + newid).animate({
                        top: "+=" + divH + "px"
                    }, options.speed);
                }
            });

            obj.children().wrapAll("<div style='position: relative; top: 0' id='vscroller-" + vscrollid + "'></div>");
        });

    };

})(jQuery);

/*
* jQuery vScroll
* Copyright (c) 2011 Simon Hibbard
* 
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:

* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE. 
*/

/*
* Version: V1.2.0
* Release: 10-02-2011
* Based on jQuery 1.4.2
*/

Found this code on the net. Want to modify it to make it scroll a div continously when the mouse button is down and stop scrolling when the mouse button is up. I tried this:

  • Change from the click event to the mousedown event. That did not do it.
  • Added a call to the same function within the function. That did not do it either.

What should I modify in this function to have the continous scrolling on mouse down?

(function ($) {
    var vscrollid = 0;
    $.fn.vScroll = function (options) {
        var options = $.extend({}, { speed: 500, height: 300, upID: "#up-arrow", downID: "#bottom-arrow", cycle: true }, options);

        return this.each(function () {
            vscrollid++;
            obj = $(this);
            var newid = vscrollid;

            obj.css("overflow", "hidden");
            obj.css("position", "relative");
            obj.css("height", options.height + "px");
            obj.children().each(
                function (intIndex) {
                    $(this).addClass("vscroll-" + vscrollid + "-" + intIndex);
                });


            var itemCount = 0;

            $(options.downID).click(function () {
                var nextCount = itemCount + 1;
                if ($('.vscroll-' + newid + '-' + nextCount).length) {
                    var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight();
                    itemCount++;
                    $("#vscroller-" + newid).animate({
                        top: "-=" + divH + "px"
                    }, options.speed);
                }
                else {
                    if (options.cycle) {
                        itemCount = 0;
                        $("#vscroller-" + newid).animate({
                            top: "0" + "px"
                        }, options.speed);
                    }
                }
            });

            $(options.upID).click(function () {
                var prevCount = itemCount - 1;
                if ($('.vscroll-' + newid + '-' + prevCount).length) {
                    itemCount--;
                    var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight();
                    $("#vscroller-" + newid).animate({
                        top: "+=" + divH + "px"
                    }, options.speed);
                }
            });

            obj.children().wrapAll("<div style='position: relative; top: 0' id='vscroller-" + vscrollid + "'></div>");
        });

    };

})(jQuery);

/*
* jQuery vScroll
* Copyright (c) 2011 Simon Hibbard
* 
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:

* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE. 
*/

/*
* Version: V1.2.0
* Release: 10-02-2011
* Based on jQuery 1.4.2
*/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

嘦怹 2024-12-13 10:58:50

能够用更简单的代码实现连续滚动。

    <script type="text/javascript"> 
                $(document).ready(function($) {
                   $(".scrolling_prev", $("#'.$node['ID'].'")).mousedown(function() {
                        startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "-=50px");
                    }).mouseup(function() {
                        $(".link_drop_box", $("#'.$node['ID'].'")).stop()
                    });
                    $(".scrolling_next", $("#'.$node['ID'].'")).mousedown(function() {
                        startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "+=50px");
                    }).mouseup(function() {
                        $(".link_drop_box", $("#'.$node['ID'].'")).stop();
                    });
                });
    </script>

Was able to get the continuous scrolling with simpler code.

    <script type="text/javascript"> 
                $(document).ready(function($) {
                   $(".scrolling_prev", $("#'.$node['ID'].'")).mousedown(function() {
                        startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "-=50px");
                    }).mouseup(function() {
                        $(".link_drop_box", $("#'.$node['ID'].'")).stop()
                    });
                    $(".scrolling_next", $("#'.$node['ID'].'")).mousedown(function() {
                        startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "+=50px");
                    }).mouseup(function() {
                        $(".link_drop_box", $("#'.$node['ID'].'")).stop();
                    });
                });
    </script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文