一个基于jQuery的文字滚动插件

最新推荐文章于 2025-05-05 13:58:30 发布

原创最新推荐文章于 2025-05-05 13:58:30 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #插件 #ViewUI

jQuery 同时被 2 个专栏收录

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义插件，用于实现列表项的上下滚动效果。该插件通过设置不同的参数来控制滚动方向、步长及速度等，适用于需要循环展示列表内容的应用场景。

        (function ($) {
            $.fn.extend({
                rollList: function (option) {
                    option = $.extend({
                        direction: "up",/*up向上滚动，其他向下滚动*/
                        step: 1,	/*滚动步长*/
                        time: 50	/*time调整滚动的速度，数值越大，速度越慢*/
                    }, option);
                    var step_coe, scroll_coe, score_coe;
                    if (option.direction == "up") { 
                        step_coe = 1;
                        scroll_coe = 1;
                        score_coe = 1;
                    } else {
                        step_coe = -1;
                        scroll_coe = -1;
                        score_coe = 0;
                    }
                    return this.each(function () {
                        var $this = $(this);
                        var _this = this;
                        var itemHeight;
                        var temp = $("<DIV> </DIV>");
                        $this.css("overflow", "hidden").children().appendTo(temp);
                        $this.append(temp.clone(true)).append(temp);
                        itemHeight = $this.children();
                        itemHeight = itemHeight.eq(1).offset().top - itemHeight.eq(0).offset().top;
                        while ($this.children(":last").offset().top - $this.offset().top <= $this.height())
                            $this.append(temp.clone(true));
                        var roll;
                        this.scrollTop = itemHeight * (1 - score_coe);
                        roll = function () {
                            temp = setInterval(function () {
                                if (_this.scrollTop * scroll_coe >= itemHeight * score_coe) {
                                    _this.scrollTop = (_this.scrollTop - itemHeight) * scroll_coe;
                                }
                                _this.scrollTop += option.step * step_coe;
                            }, option.time);
                        }
                        $this.hover(function () {
                            clearInterval(temp);
                        }, function () {
                            roll();
                        });
                        roll();
                    });
                }
            })
        } (jQuery));

通常，需要滚动显示的内容放在一个<ul>无序列表里，使用滚动特效，要把<ul>外层的DIV指定一个高度值，比如height:100px，如果不指定会出现问题。

开启滚动效果要在页面加载时调用$(element).rollList()函数，element则是元素的名称。