开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

官网地址：http://www.chjtx.com/JRoll/

醉萝卜 JRoll

My English is very poor, but this does not affect my heart to communicate with the world, thanks for Google translation

看视频了解更多：JRoll大烩[捂脸]
视频相关PPT下载：JRoll视频.pptx

先睹为快 Preview

手机扫二维查看示例

Use the phone to scan the QR code to see the example

http://www.chjtx.com/JRoll/demos/

注意： JRoll是独立插件，不需要依赖任何第三方库，Demo代码上引入了FastClick库是为了演示JRoll能和FastClick配合使用，因为IScroll5开启click:true后在IOS上与FastClick一起使用会导致单击事件需要双击才能触发的问题，与之对比JRoll不会有这个问题。

Notice: JRoll does not need to rely on any third party libraries.

运行示例 Run Demos

#克隆仓库 Clone repository
git clone https://github.com/chjtx/JRoll.git

#进入项目 Go into project
cd JRoll

#安装express Install express
npm install -g express

#如果用苹果电脑，需要加sudo
#If on mac, use sudo
sudo npm install -g express

#运行 Run
node server.js

然后在浏览器打开 localhost:3020/demos/

And then open the localhost:3020/demos/ in the browser

概述 Overview

说明 Description

JRoll，一款能滚起上万条数据，具有滑动加速、回弹、缩放、滚动条、滑动事件等功能，兼容CommonJS/AMD/CMD模块规范，开源，免费的轻量级html5滚动插件。

JRoll第二版是在JRoll第一版基础上重写JRoll滑动算法，基于时间运动，解决帧频降低时滑动缓慢的问题，更改垂直水平方向判断方法，使捕获垂直水平方向更准确灵敏。

JRoll第二版增减了一些api不完全兼容JRoll第一版。

JRoll is a lightweight, lightweight HTML5 scroll plugin compatible with the CommonJS / AMD / CMD module specification, open source, free slideshow, scroll acceleration, resizing, scrolling, and slide events.

JRoll second edition is based on the first version of JRoll, sliding algorithm rewrite, based on time movement, to solve the problem of slow sliding frame rate, change the vertical and horizontal direction to determine the direction of the vertical and horizontal capture more accurate and sensitive.

JRoll Second Edition adds some APIs that are not fully compatible with JRoll first edition.

兼容性 compatibility

• IOS 6+
• Android 4.0+
• Chrmoe
• Firefox
• IE 9+

注意：JRoll专为移动应用度身设计，对PC浏览器的兼容只为方便开发调试，没作过多处理，因此强烈建议使用谷歌浏览器模拟器进行开发，在移动端使用。

Note: In order to make this plugin lightweight, JRoll PC browser compatible only to facilitate the development of debugging, not to do too much processing, it is strongly recommended to use the Google browser simulator for development, please use in the mobile side.

在UC浏览器上表现较差，作者已将UC浏览器定义为资讯类应用，非专业浏览器，不会专门去兼容它。

Will not specifically go too compatible with the old browser

引入 Import

npm

npm install jroll --save

普通方式引入

<script src='jroll'></script>

CommonJS规范引入

var JRoll = require('jroll');

AMD规范引入（requireJS）

require(['jroll'], function(JRoll) {
    ...
});

CMD规范引入（seaJS）

seajs.use('jroll', function(JRoll) {
    ...
});

简单例子 Simple example

<!-- html代码 -->
<div id="wrapper">
    <ul id="scroller">
        <li>有一美人兮，见之不忘。</li>
        <li>一日不见兮，思之如狂。</li>
        <li>凤飞翱翔兮，四海求凰。</li>
        <li>无奈佳人兮，不在东墙。</li>
        <li>将琴代语兮，聊写衷肠。</li>
        <li>何日见许兮，慰我彷徨。</li>
        <li>愿言配德兮，携手相将。</li>
        <li>不得於飞兮，使我沦亡。</li>
    </ul>
</div>

<!-- css代码 -->
<style>
ul {margin: 0; padding: 0;}
li {line-height: 24px; margin-left: 24px;}
#wrapper {width: 200px; height: 100px; border: 1px solid;}
</style>

<!-- javascript代码 -->
<script>
new JRoll("#wrapper");
</script>

使用 Use

如何使用 How to use

var jroll = new JRoll(selector [, options]);

selector是容器，可以是id选择器字符串#wrapper，也可以是dom对象document.getElementById('wrapper')，第二个参数是可选对象，该参数内容决定了创建一个怎样的JRoll对象

The selector is a container, either an id selector string #wrapper or a dom object document.getElementById ( 'wrapper'). The second argument is an optional object that determines how a JRoll instance is created.

例：创建一个带垂直滚动条的对象

Example: Create an instance with a vertical scroll bar

var jroll = new JRoll("#wrapper", {scrollBarY:true});

保存了JRoll对象后，可动态对部分可选参数进行修改

Save the JRoll instance, you can dynamically modify some of the optional parameters

例：禁止回弹

Example: No rebound

jroll.options.bounce = false;

可选参数 Options

✅ 表示可动态修改

✅ Means that can be dynamically modified

属性 Attributes

• id，JRoll对象的唯一标识符。
• id -> the unique identifier for the JRoll instances.

var jroll = new JRoll("#wrapper");
console.log(jroll.id);

• jrollMap，对象，JRoll对象集合，保存了当前页面的所有JRoll对象。
• jrollMap -> object, JRoll instances collection, the current page to save all the JRoll instances.

console.log(JRoll.jrollMap);

方法 Method