Giter Club home page Giter Club logo

zepto-snapscroll's Introduction

snap scroll

snap scroll 是一个移动端手机页面切换插件,可以上下滑动或者左右滑动。

因项目需要,该版本目前仅在chrome 和 safari 下运行。

##Use

调用如下语句即可。

$("#J_pages").snapscroll();

同时支持以下参

directionLockThreshold: 5,          //方向锁定阈值,判断用户的拖动意图,是倾向x方向拖动还是y方向
scroll:'n',                         //左右滚动h / 上下滚动v /左右上下都可滚动n
scrollThreshold:4,                  //百分比,4表示页面的4/1,单位n*100%
speed:400,                          //页面滚动速度,单位ms
loop: true                          //是否循环
useTransition:true                  //是否支持CSS3动画,默认是支持的

举个栗子,在调用插件时传递对应的参数即可:


$("#J_pages").snapscroll({
    directionLockThreshold: 5,          //方向锁定阈值,判断用户的拖动意图,是倾向x方向拖动还是y方向
    scroll:'v',                         //左右滚动h / 上下滚动v /左右上下都可滚动n
    scrollThreshold:4,                  //百分比,4表示页面的4/1,单位n*100%
    speed:400,                          //页面滚动速度,单位ms
    loop: true                          //是否循环
    useTransition:true                  //是否支持CSS3动画
});

##Method

插件提供以下几个方法调用

//TODO

##Event 插件提供以下几个回调事件

//开始滑动时触发
$("#J_pages").on('start:scroll',function(e,curIndex,newIndex,direction){
    console.info('start event',curIndex,newIndex,direction);
});

//活动结束后触发
$("#J_pages").on('done:scroll',function(e,newIndex,direction){
   console.info('done event',newIndex,direction)
})

##DEMO DEMO1

demo1

DEMO2

demo2

Changelog

  • v0.1.1
    1. 修复不启用循环拖曳时,拖到最后一个无法继续拖动bug
  • v0.1.0
    1. 修复左右滑动时,滑动距离小于翻页闸值时的bug
    2. 新增useTransition参数 支持JS动画
  • v0.0.2
    1. 新增四向滚动
    2. 修复部分BUG
  • v0.0.1 项目创建

Other

My Blog

zepto-snapscroll's People

Contributors

hugohua avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.