flipsnap.js模仿手机滑动效果

  flipsnap.js是一款模拟手机浏览器滑动效果的类库,支持电脑上鼠标按下滑动和手机浏览器触摸滑动效果

flipsnap.js模仿手机滑动效果

flipsnap.js使用指南

1,导入flipsnap.js类库(flipsnap.js不依赖其他js类库)

<script src="flipsnap.js"></script>

2,编写html代码

html代码示例如下,外层html样式为.viewport,内层元素样式为.flipsnap

<div class="viewport">
    <div class="flipsnap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>

3,编写样式

.viewport {
    width: 320px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}
.flipsnap {
    width: 960px; /* 320px(item width) * 3(item count) */
}
.flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}
.item {
    float: left;
    width: 310px;
    font-size: 50px;
    text-align: center;
    padding: 50px 0;
    background: #EFEFEF;
    border: 5px solid #999;
    color: #666;
}
  • .viewport设置overflow:hidden隐藏内层元素,并且定义显示宽度
  • .flipsnap 设置所有子元素的总宽度。
  • .item 通过float样式显示在一行。如果浏览器支持flex布局,可以使用flex来实现也行。.item主要是触碰移动的元素

4,编写js调用Flipsnap进行初始化

//调用Flipsnap(),传递css选择器选中内部元素,本示例为.flipsnap。第三点列出的样式名称都可以修改,移动块元素主要是内层元素的子元素
Flipsnap('.flipsnap');

flipsnap.js API文档如下

 

flipsnap.js使用方法

Flipsnap(HTMLElement|String[, option])
  • 第一个参数为HTMLElement或者字符串,必须的。option可以缺省
  • 第一个参数为字符串时为css选择器(和jquery选择器一样)
  • 为字符串时,将获取对一个元素,非所有元素(When set string, to get first element of result. Not all element.)

示例

// HTMLElement
var elem = document.getElementById('foo');
var flipsnap = Flipsnap(elem);
// CSS Selector
var flipsnap = Flipsnap('#foo');
// With options
var flipsnap = Flipsnap('#foo', { distance: 240 });

Option配置项目

name type description
maxPoint Number Stop point count. default is auto calculate from element item count.
demo
distance Number Move distance. default is auto calculate from element width and maxPont.
demo
transitionDuration Number Transition duration (millisecond). default is 350.
demo
disableTouch Boolean When set true, touch event is disabled. Only handling button or etc interface. default is false.
demo
disable3d Boolean When support 3D transform browser and this option set true, it is not used 3D transform and use 2D transform. You should set true, when it is a device which has a bug in 3D transform(old Android or BlackBerry etc). default is false.

flipsnap.js的方法

refresh()

Recalculate values.

var flipsnap = Flipsnap('#foo');
flipsnap.refresh();

hasNext()

Return true or false. true is returned when there is next element.

var flipsnap = Flipsnap('#foo');
if (flipsnap.hasNext()) {
    // do something
}

hasPrev()

Return true or false. true is returned when there is previous element.

var flipsnap = Flipsnap('#foo');
if (flipsnap.hasPrev()) {
    // do something
}

toNext([transitionDuration])

Move to next item.

var flipsnap = Flipsnap('#foo');
$('.nextBtn').click(function() {
    flipsnap.toNext();
});

toPrev([transitionDuration])

Move to previous item.

var flipsnap = Flipsnap('#foo');
$('.prevBtn').click(function() {
    flipsnap.toPrev();
});

moveToPoint(point, [transitionDuration])

Move to item of number.

var flipsnap = Flipsnap('#foo');
$('.moveBtn').click(function() {
    var point = $('input.point').val();
    flipsnap.moveToPoint(point);
});

flipsnap.js事件

fspointmove

This event is fired when point moved.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fspointmove', function() {
    // do something
}, false);
// using jQuery .bind()
var flipsnap = Flipsnap('#foo');
$(flipsnap.element).bind('fspointmove', function() {
    // do something
}, false);

fstouchstart

This event is fired when touch start.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchstart', function() {
    // do something
}, false);

fstouchmove

This event is fired when touch move.

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchmove', function(ev) {
    ev.delta;     //=> delta x value, given px
    ev.direction; //=> direction value, 1 or -1
}, false);

This event is cancelable.

flipsnap.element.addEventListener('fstouchmove', function(ev) {
    if (ev.direction === -1) {
      ev.preventDefault(); //取消touchmove事件并且触发touchend事件
    }
});

fstouchend

触摸结束或者鼠标弹起后触发的事件

var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchend', function(ev) {
    ev.moved;         //=> is moved, true or false
    ev.originalPoint; //=> original point
    ev.newPoint;      //=> new point
    ev.cancelled;     //=> is cancelled, true or false
}, false);

 

flipsnap.js下载及示例

点击下载flipsnap.js示例

点击这里看下flipsnap.js效果

浏览器支持

 

Mobile

  • iOS Safari (iOS4+)
  • Android Browser (Android 2.1+)
  • Android Firefox Mobile 9.0+
  • Android Opera Mobile 11.50+
  • Window8 IE10+

PC

  • IE9+
  • Google Chrome
  • Opera
  • Firefox
  • Safari

 

 

 

 

来源:http://hokaccha.github.io/js-flipsnap/doc.html


原创文章,转载请注明出处:flipsnap.js模仿手机滑动效果

评论(0)Web开发网
阅读(1088)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧