jQuery文字上下滚动插件meuiTextScroll

所属分类：UI-滚动

11376 74 查看评论 (2)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：文字上下滚动自带翻页功能，可控制滚动数度，滚动方向。

更新时间：2021-01-08 00:07:01

插件使用说明

meuiTextScroll 文字上下滚动自带翻页控件

控件调用方法

第1步，引入控件所需的CSS、JS

<link type="text/css" rel="stylesheet" href="assets/css/meui-textScroll.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="src/meui-textScroll.js"></script><!--meui文字上下滚动-->

第2步，创建DOM节点

1	`<div` `id="scrollBox"></div>`

第3步，调用控件

$("#scrollBox").meuiTextScroll({
    content: '', //自定义滚动区域内容,默认空(可选). 注意：每一行数据HTML代码只能用li标签包裹,不能用其它标签
    source: { //数据源,仅当参数content不为空时有效.
        [
            {
                "title": "标题信息1",
                "description": "文本内容文本内容",
                "pubdate": "2020-12-15 14:32:21",
                "href": "http://****.com"
            },
            {
                "title": "标题信息2",
                "description": "文本内容文本内容",
                "pubdate": "2020-12-15 14:32:21",
                "href": "http://****.com"
            }
        ]
    },
    format: ["title", "description", "pubdate", "href"], //自定义数据源字段,数组格式,仅当参数content不为空时有效.(可选). 数组元素分别对应数据源字段：标题, 描述(可选), 发布时间(可选), 链接地址(可选)
    caption: '询价单最新消息', //区块标题(可选)
    width: 340, //滚动区域宽(可选)
    height: 500, //滚动区域高(可选)
    line: 1, //每次滚动的行数(可选)
    speed: 500, //滚动速度(毫秒)(可选)
    timer: 2000, //滚动间隔时间(毫秒)(可选)
    direction: 'up', //滚动方向(可选). up 向上(默认), down 向下
    pageBtn: true, //是否显示上下翻页按钮,默认true(可选)
    up: "but_up", //向上按钮ID属性名称(可选)
    down: "but_down" //向下按钮ID属性名称(可选)
})