[英]Hammer.js - slide element slowly (carousel effect) on swipe/drag right or left
I'm developing a mobile app using cordova 3.0 for Android. 我正在使用适用于Android的cordova 3.0开发一个移动应用程序。 I have a list of element in a wrapper div: 我在包装div中有一个元素列表:
<div id='list_wrapper'>
<ul class="table-view">
<li id="listItem1">
</li>
<li id="listItem2">
</li>
</ul>
<!-- ... -- >
</div>
now I'd like to move this list_wrapper slowly when user drag left o right to change view with another element, so to create a slide effect. 现在,当用户向左或向右拖动以更改另一个元素的视图时,我想缓慢移动此list_wrapper,以创建幻灯片效果。
I'm talking abount something like this: 我在说这样的话:
At this moment I succeeded in doing it only on swipe and it's not what I want because on swipe the view is changed once all in block. 目前,我仅在滑动时成功完成了操作,这不是我想要的,因为在滑动时视图一次全部更改。 This is what I did: 这是我所做的:
var hammer_options = {
drag_block_horizontal: true,
dragLockToAxis: true,
preventDefault: true
};
var hammertime = $('#list_wrapper').hammer(hammer_options);
var leftSwipeHandler = function() {
console.log("swipeleft");
// ...
};
var rightSwipeHandler = function() {
console.log("swiperight");
// ...
};
hammertime.on("swipeleft", leftSwipeHandler);
hammertime.on("swiperight", rightSwipeHandler);
Besides I don't like this swipe solution very much because the swipe does not work well for me (I tested the swipe on chromium and firefox running my app on ripple emulate). 此外,我不太喜欢这种滑动解决方案,因为该滑动对我而言效果不佳(我在铬和Firefox上测试了滑动,并在波纹仿真下运行了我的应用程序)。
Any advice? 有什么建议吗? Thanks 谢谢
try code like this: 试试这样的代码:
hammer = new Hammer(backgroundElement)
hammer.on('panright panleft', function(event){
console.log(event.deltaX);
backgroundElement.style.transform = 'translateX(' + event.deltaX + 'px)';
});
I advice you not use jQuery because she make your app run slowly in mobile browsers, try use better tools, especially when you animating elements. 我建议您不要使用jQuery,因为它会使您的应用程序在移动浏览器中运行缓慢,请尝试使用更好的工具,尤其是在对元素进行动画处理时。 And never move elements with their left or top, use transforms! 永远不要将元素的左侧或顶部移动,而要使用变换! :) :)
maybe you will have a look on this example-site: http://mv-sb.de/de/ 也许您可以在以下示例站点上查看: http : //mv-sb.de/de/
the news at the bottom will have a pan/slide effect. 底部的新闻将具有平移/滑动效果。
i am using hammerJS 2 and jquery 1.10 我正在使用HammerJS 2和jquery 1.10
i was inspired by http://www.sitepoint.com/jquery-plugin-for-touch-swiping-part-1-of-2/ 我的灵感来自http://www.sitepoint.com/jquery-plugin-for-touch-swiping-part-1-of-2/
my code looks like this: 我的代码如下所示:
$(document).on("pagecreate", function () {
var news = $('#target div.news');
var t = $('#target');
var lastLeft = 0;
var i = 0;
var b = true;
var j = 0;
$('#target').hammer({domEvents: false}).on("panleft panright panend", function(e){
console.log(lastLeft);
if(b === false){
return;
}else if(lastLeft == 0 && e.type == 'panright'){
//$(this).parent().css('border-left-color', '#BB131D');
return;
}else if(Math.abs(lastLeft)+100 >= (news.width()/t.width())*100 && e.type == 'panleft'){
return;
}
var w = Math.abs(t.width());
var absolut = Math.abs(e.gesture.deltaX);
var p = (absolut/w)*100;
switch(e.type) {
case "panleft":
news.css('left', (-(p) + lastLeft) +'%');
break;
case "panright":
news.css('left', (p + lastLeft) +'%');
break;
}
if(p > 30){
b = false;
$(this).data('hammer').stop(true);
switch(e.type) {
case "panleft":
i++;
break;
case "panright":
i--;
break;
}
news.animate({left: -i*100+'%'}, 400, function(){
b = true;
lastLeft = (parseFloat(news.css('left'))/w)*100;
});
}else if(e.type == 'panend'){
news.animate({left: lastLeft+'%'}, 200);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.