将页面控制添加到整页触摸滑动器/滑块-Hammer.js
Adding paging controls to a full page touch swiper/slider - Hammer.js
点击FIDDLE
以下是我使用hammer.js创建的功能完整的全页触摸滑块
您可以使用drag
、swipe
或pan
在页面之间导航。
滑块按预期工作,但我现在正试图通过添加两个按钮来创建回退导航,以便在单击时也可以进行左右翻页。
问题
如何在点击时调用锤子向左或向右滑动(Javascript或jQuery)
当前尝试
$('#Left').on('click', function() {
HammerCarousel(document.querySelector('.Swiper'), 'Left');
});
完整代码
function swipe() {
var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, "requestAnimationFrame")] || function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
function dirProp(direction, hProp, vProp) {
return (direction & Hammer.DIRECTION_HORIZONTAL) ? hProp : vProp
}
function HammerCarousel(container, direction) {
this.container = container;
this.direction = direction;
this.panes = Array.prototype.slice.call(this.container.children, 0);
this.containerSize = this.container[dirProp(direction, 'offsetWidth', 'offsetHeight')];
this.currentIndex = 0;
this.hammer = new Hammer.Manager(this.container);
this.hammer.add(new Hammer.Pan({ direction: this.direction, threshold: 10 }));
this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this.onPan, this));
this.show(this.currentIndex);
}
HammerCarousel.prototype = {
show: function (showIndex, percent, animate) {
showIndex = Math.max(0, Math.min(showIndex, this.panes.length - 1));
percent = percent || 0;
var className = this.container.className;
if (animate) {
if (className.indexOf('animate') === -1) {
this.container.className += ' animate';
}
} else {
if (className.indexOf('animate') !== -1) {
this.container.className = className.replace('animate', '').trim();
}
}
var paneIndex, pos, translate;
for (paneIndex = 0; paneIndex < this.panes.length; paneIndex++) {
pos = (this.containerSize / 100) * (((paneIndex - showIndex) * 100) + percent);
translate = 'translate3d(' + pos + 'px, 0, 0)';
this.panes[paneIndex].style.transform = translate;
this.panes[paneIndex].style.mozTransform = translate;
this.panes[paneIndex].style.webkitTransform = translate;
}
this.currentIndex = showIndex;
},
onPan: function (ev) {
var delta = dirProp(this.direction, ev.deltaX, ev.deltaY),
percent = (100 / this.containerSize) * delta,
animate = false;
if (ev.type == 'panend' || ev.type == 'pancancel') {
if (Math.abs(percent) > 20 && ev.type == 'panend') {
this.currentIndex += (percent < 0) ? 1 : -1;
}
percent = 0;
animate = true;
}
this.show(this.currentIndex, percent, animate);
}
};
var outer = new HammerCarousel(document.querySelector('.Swiper'), Hammer.DIRECTION_HORIZONTAL);
};
$(swipe);
html,
body,
.Page,
.Swiper{
position:relative;
height:100%;
}
.Swiper{
background:#666;
overflow:hidden;
}
.Swiper.animate > .Page{
transition:all .3s;
-webkit-transition:all .3s;
}
.Page{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
padding:0 10px;
font:42px Arial;
color:#fff;
padding-top:10%;
text-align:center;
}
.Page:nth-child(odd) {
background:#b00;
}
.Page:nth-child(even) {
background:#58c;
}
#Left,
#Right{
position:absolute;
top:0;
height:50px;
width:50px;
background:#fff;
text-align:center;
font:16px/3em Arial;
cursor:pointer;
}
#Left{
left:0;
}
#Right{
right:0;
}
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Swiper">
<div class="Page">PAGE 1<br/>DRAG LEFT</div>
<div class="Page">PAGE 2<br/>SWIPE ME</div>
<div class="Page">PAGE 3<br/>HOLD TO PAN</div>
<div class="Page">PAGE 4<br/>FLICK TO GO BACK</div>
</div>
<div id="Left">Left</div>
<div id="Right">Right</div>
我为此精心设计了一个jQuery解决方案,它应该满足您所寻找的后备方案。
不过,有些事情需要考虑。在您的示例中,也没有考虑页面重新大小。我这样做也不是为了保持一致并解决眼前的问题,但您会注意到,我在这个解决方案中使用$('.Page').width();
作为变量。如果您确实考虑了重新调整大小,我建议您重新分配此值。此外,滑动/点击的组合也会导致这种情况。我认为由于您表示这将是一种回退,用户将获得两种体验中的一种。如果没有,我们还需要一种方法来更新滑动事件上的tracker
。
你会注意到var tracker = { 'R': 0 }
。虽然命名可能不是最好的,但'R'
将说明用户以正负1的方式进行了多少次右"滑动"(导航点击)
<div id="Left" direction="L">Left</div>
<div id="Right" direction="R">Right</div>
$(function() {
var width = $('.Page').width();
var pages = $('.Page').length;
var tracker = { 'R': 0 }
$('#Right, #Left').click(function() {
$(this).attr('direction') === 'R' ?
((tracker.R < (pages - 1) ? tracker.R += 1 : pages)) :
(tracker.R > 0) ? (tracker.R -= 1) : 0;
$('.Swiper').animate({ 'scrollLeft': $('.Page').width() * tracker.R }, 250)
});
});
JSFiddle链接
相关文章:
- Hammer.js阻止在Android Webview中点击超链接
- Hammer.js滑动不会'单击按钮后才能工作
- Hammer.js过了一段时间就停止工作了
- 使用 Hammer.js 的程序化事件触发器
- 将页面控制添加到整页触摸滑动器/滑块-Hammer.js
- Hammer js:pinchend有时不会;不要开火
- 多个元素响应移动Webkit和Hammer JS上的触摸事件
- Hammer.js 在单击叠加层并将其删除时,将焦点设置在叠加层下方的输入上
- Meteor 和 Hammer JS 包的刷新后跟踪器错误
- hammer.js - 如何在不传播“点击”事件的情况下注册“保留”事件
- hammer.js - 父节点和子节点上的不同滑动处理程序
- 带有JQuery插件的Hammer.js没有触发事件
- Hammer.js:滑动事件对图像无效
- Hammer JS多tocuh事件中的事件委派不起作用
- Hammer.js元素在绝对容器滚动容器中
- 当触发平移方向时,Hammer.js将距离设置为0
- 使用Hammer.js缩放SVG
- Hammer.js(IE8)-对象没有't支持属性或方法'addEventListener'
- 如何使用Hammer.js Touch Emulator编辑文本输入字段
- 动态添加元素的Hammer.js事件