Javascript Hammer.js-在向右或向左滑动/拖动时缓慢滑动元素(旋转木马效果)
我正在为Android开发一款使用cordova 3.0的移动应用程序。 我在包装器div中有一个元素列表:Javascript Hammer.js-在向右或向左滑动/拖动时缓慢滑动元素(旋转木马效果),javascript,jquery,cordova,gestures,hammer.js,Javascript,Jquery,Cordova,Gestures,Hammer.js,我正在为Android开发一款使用cordova 3.0的移动应用程序。 我在包装器div中有一个元素列表: <div id='list_wrapper'> <ul class="table-view"> <li id="listItem1"> </li> <li id="listItem2"> </li> </ul> &l
<div id='list_wrapper'>
<ul class="table-view">
<li id="listItem1">
</li>
<li id="listItem2">
</li>
</ul>
<!-- ... -- >
</div>
此外,我不太喜欢这个滑动解决方案,因为滑动对我来说不太好(我在chromium和firefox上测试了滑动,在ripple emulate上运行我的应用程序)
有什么建议吗?
谢谢也许您可以看看这个示例站点: 底部的新闻将具有平移/滑动效果 我使用的是HammerJS2和jQuery1.10 我的灵感来自 我的代码如下所示:
$(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);
}
});
});
hammer = new Hammer(backgroundElement)
hammer.on('panright panleft', function(event){
console.log(event.deltaX);
backgroundElement.style.transform = 'translateX(' + event.deltaX + 'px)';
});
请尝试以下代码:
$(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);
}
});
});
hammer = new Hammer(backgroundElement)
hammer.on('panright panleft', function(event){
console.log(event.deltaX);
backgroundElement.style.transform = 'translateX(' + event.deltaX + 'px)';
});
我建议你不要使用jQuery,因为她会让你的应用程序在移动浏览器中运行得很慢,请尝试使用更好的工具,尤其是当你制作元素动画时。并且永远不要用元素的左侧或顶部移动元素,请使用变换!:)