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文档如下
Recalculate values.
Return true or false. true is returned when there is next element.
Return true or false. true is returned when there is previous element.
Move to next item.
Move to previous item.
Move to item of number.
This event is fired when point moved.
This event is fired when touch start.
This event is fired when touch move.
This event is cancelable.
触摸结束或者鼠标弹起后触发的事件
flipsnap.js使用方法
Flipsnap(HTMLElement|String[, option])
示例
// 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()
var flipsnap = Flipsnap('#foo');
flipsnap.refresh();
hasNext()
var flipsnap = Flipsnap('#foo');
if (flipsnap.hasNext()) {
// do something
}
hasPrev()
var flipsnap = Flipsnap('#foo');
if (flipsnap.hasPrev()) {
// do something
}
toNext([transitionDuration])
var flipsnap = Flipsnap('#foo');
$('.nextBtn').click(function() {
flipsnap.toNext();
});
toPrev([transitionDuration])
var flipsnap = Flipsnap('#foo');
$('.prevBtn').click(function() {
flipsnap.toPrev();
});
moveToPoint(point, [transitionDuration])
var flipsnap = Flipsnap('#foo');
$('.moveBtn').click(function() {
var point = $('input.point').val();
flipsnap.moveToPoint(point);
});
flipsnap.js事件
fspointmove
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
var flipsnap = Flipsnap('#foo');
flipsnap.element.addEventListener('fstouchstart', function() {
// do something
}, false);
fstouchmove
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);
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
PC
来源:http://hokaccha.github.io/js-flipsnap/doc.html
加支付宝好友偷能量挖...
原创文章,转载请注明出处:flipsnap.js模仿手机滑动效果