npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

list-scroller

v1.1.4

Published

Prize scroll notification.

Downloads

3

Readme

中奖信息滚动展示模块

在做运营活动页面的过程中,特别是抽奖活动页面,通常会有中奖信息滚动通知的需求,本模块的出现就是为了方便实现该效果。

安装

npm install list-scroller

插件引用

本插件依赖zepto/jQuery,zepto需要包含animate模块才行。

如果页面上已有jquery或者zepto(animate),则不用再引入zepto.min.js

传统引用

<script type="text/javascript" src="../src/zepto.min.js"></script>
<script type="text/javascript" src="../src/list-scroller.js"></script>

模块化引用(比如:Webpack)

require('list-scroller');

用法例子

实例可参考test.html

//第一步,初始化插件
ListScroller.init($("#inport-box"), {
    duration:800,
    interval:3000,
    height: "24px",
    "font-size": "18px"
});

//第二步,设置展示数据(字符串数组形式)
ListScroller.setData(['diamont1001 抽中iPhone 6 plus', '491441035 抽中iPad mini 2', 'chenjr 抽中1000元现金']);

//第三步,开始滚动
ListScroller.start();

接口介绍

初始化接口

ListScroller.init(handler, options)

@param handler: 滚动显示外框的id或者jquery句柄
@param options: (可选)配置信息
    {
        "font-size": "12px",    //文字字体大小,默认12px
        height: "18px",         //滚动展示栏高度,默认18px
        color: "white",         //文字颜色,默认白色
        background: "black",    //滚动框背影颜色,默认黑色
        duration: 800,          //滚动时长,默认800ms
        interval: 3000          //滚动间隔,默认3000ms
    }

数据更新接口

ListScroller.setData(arr)
//支持热更新,数据自动平滑更新

开始滚动

ListScroller.start()

停止滚动

ListScroller.stop()