【发布时间】：2014-12-15 08:33:31
【问题描述】：
我正在尝试创建一种插件或事件，通过在 ipad 上滑动来 css 转换（移动）元素。为此，我目前正在使用 cocco 的出色工作小代码 sn-p：
(function(D){
var M=Math,abs=M.abs,max=M.max,
ce,m,th=20,t,sx,sy,ex,ey,cx,cy,dx,dy,l,
f={
touchstart:function(e){
t=e.touches[0];
sx=t.pageX;
sy=t.pageY
},
touchmove:function(e){
m=1;
t=e.touches[0];
ex=t.pageX;
ey=t.pageY
},
touchend:function(e){
ce=D.createEvent("CustomEvent");
ce.initCustomEvent(m?(
max(dx=abs(cx=ex-sx),dy=abs(cy=ey-sy))>th?
dx>dy?cx<0?'swl':'swr':cy<0?'swu':'swd':'fc'
):'fc',true,true,e.target);
e.target.dispatchEvent(ce);
m=0
},
touchcancel:function(e){
m=0
}
}
for(l in f)D.addEventListener(l,f[l],false)
})(document);
对于过渡 rico st.cruz 的插件 jquery-transit.js 在我的网站上实现（当然还有 jquery）
// 用法（示例）
$("body").on( 'swu', function() {
fullscreenSwipeUp = true;
$("#Fullscreen").transition( { y: '-100%' }, 900, 'easeInSine' )
} );
到目前为止一切顺利。 现在我的想法是通过一个额外的触摸移动事件来指示可能的“向上滑动”，该事件在手指点击时移动元素。我成功地添加了以下js：
// js 部分以更酷的方式集成
var startY;
window.addEventListener( 'touchstart', function(e) {
e.preventDefault();
startY = e.targetTouches[0].pageY;
}, false );
window.addEventListener( 'touchmove', function(e) {
e.preventDefault();
// check if transition is going on and animations are ready
if ( !fullscreenSwipeUp ) { // find better solution f.e. to dispatch event on fullscreen transition?
var diffY = e.changedTouches[0].pageY - startY;
// fullscreen transition
if ( diffY <= 0 ) {
$("#Fullscreen").css( { y: diffY } );
} else {
// snap to clean starting value at bottom
$("#Fullscreen").css( { y: 0 } );
};
// do something else to indicate that swipe will be concluded when finger leaves
// min value based on variable th from custom swipe event
if ( diffY < -20 ) {
// indicate that swipe will be concluded
} else {
// indicate that swipe will not conclude
};
};
}, false );
// fullscreen fall back to bottom if swipe not concluded
window.addEventListener( 'touchend', function(e) {
e.preventDefault();
if ( !fullscreenSwipeUp ) {
// fall back to starting values / dequeue for smoother transition on second time
$("#Fullscreen").dequeue().transition( { y: 0 }, 150, 'easeInSine' );
};
}, false );
现在我还看到，在此代码中，作为基本自定义事件和我的东西的双击移动事件，各个部分相互重叠。如果有人能给我一个如何整合这两个代码的想法，那就太棒了。或者也许存在这样的东西？我找不到合适的东西。
感谢您的帮助！
PS 我也尝试在这里创建一个小提琴：http://jsfiddle.net/Garavani/9zosg3bx/1/ 但遗憾的是，我太愚蠢了，无法让它与所有外部脚本一起工作:-(
jquery-transit.js： http://ricostacruz.com/jquery.transit/
编辑：
所以我按以下方式更改了我的代码。 我想我对原始的滑动事件（也包含触摸移动事件）和我想对元素做什么感到困惑。 尽管可能仍然一团糟，但它仍然有效。 我必须设置一种标志来检查是否执行了滑动以暂时禁用触摸移动事件。有没有更好的方法来做到这一点？感谢您的耐心等待！
var startY;
var swipeY = false; // for condition if condition for swipe is fullfilled
var swiped = false; // for check if swipe has been executed
window.addEventListener( 'touchstart', function(e) {
e.preventDefault();
startY = e.targetTouches[0].pageY;
}, false );
window.addEventListener( 'touchmove', function(e) {
e.preventDefault();
// check if swipe already executed
if ( !swiped ) { // find better solution f.e. to dispatch event when swiped?
var diffY = e.changedTouches[0].pageY - startY;
// check for final swipe condition
if ( diffY < -30 ) {
swipeY = true;
// do something with an element to indicate swipe will be executed
} else {
swipeY = false;
// do something with an element to indicate swipe will NOT be executed
};
};
}, false );
window.addEventListener( 'touchend', function(e) {
e.preventDefault();
if ( swipeY ) {
swiped = true;
// trigger the swipe action
} else {
// let the element fall back to original state
};
}, false );
编辑 2：
var startY;
var swipeY = false;
var swiped = false;
var wh = $(window).height();
// fullscreen move on touchmove
function fm(e) {
e.preventDefault();
// check if transition is going on and animations are ready
if ( !swiped && ready ) { // !swiped is necessary, also / why?
var diffY = e.changedTouches[0].pageY - startY;
var scaleY = diffY/wh;
// calculate transition intermediate values
var osh = 0.91 - ( 0.09 * scaleY );
var ofsc = 0.86 - ( 0.14 * scaleY );
// fullscreen transition
if ( diffY <= 0 ) {
tfs(osh,[1,-scaleY],ofsc,diffY,0) // an extra module that does the animation with the calculated values
} else {
// snap to clean starting values at bottom
tfs(0.91,[1,0],0.86,0,0)
};
// rotate arrow to indicate surpassing minimum touch move leading to swipe
if ( diffY < -30 ) {
swipeY = true;
$arrowDown.addClass('rotation');
} else {
swipeY = false;
$arrowDown.removeClass('rotation');
};
};
};
// fullscreen swipe
function fs(e) {
e.preventDefault();
window.removeEventListener( 'touchmove', fm, false );
if ( !swiped ) { // this is necessary, also / why?
if ( swipeY ) {
$arrowbottomField.trigger('touchstart'); // trigger the full swipe (also available as element direct touch (on touch swiped is set to true in touchstart event handler, also)
window.removeEventListener( 'touchend', fs, false );
} else {
// fall back of animation to starting values
tfs(0.91,[1,0],0.86,0,0);
};
};
};
window.addEventListener( 'touchstart', function(e) {
e.preventDefault();
startY = e.targetTouches[0].pageY;
window.addEventListener( 'touchmove', fm, false );
}, false );
window.addEventListener( 'touchend', fs, false );
解释（尽我所能） 再次感谢可可的耐心。 与此同时，我再次修改了代码。 它有效 :-) 我知道这会让你眼花缭乱。
在我的网站上（应该也可以在 ipad 上工作，但不仅如此）有一个可以触摸的字段，并且全屏向上移动覆盖整个窗口（类似于 www.chanel.com ->“更多”） . 此外，（在 ipad 上）可以在整个身体上滑动来做同样的事情。
阶段：
第 1 阶段）用户点击和滑动（保持手指不动）全屏 div 跟随他的手指。
暂停 2) 如果滑动达到一定距离（手指仍然在上面），小箭头也会转动指示：如果您现在离开，将执行滑动
暂停 3) 手指仍然停留在距离变得小于完成滑动的距离时，箭头返回
第 4 阶段）用手指离开已经走过的距离决定全屏是完全向上移动还是回落（如果距离不够）
对于转动的小箭头，我可以使用你告诉我的类切换（比我做的更好！谢谢），但对于动画的其余部分，不是因为值很大程度上取决于窗口大小。我的整个网站的想法是浏览器窗口可以有任何大小或关系，所有内容都可以自行调整（随时包含水平和垂直居中）
对于手机来说，一切都完全改变了。
如果你想看一下：www.stefanseifert.com（如果你想看到效果（在 ipad 上），你必须通过触摸预告片 div 底部右上角的箭头来跳过介绍)
我知道还有很多其他的东西是最先进的编程技术（说得非常仔细:-)，但在某种程度上它是有效的。 而且我雇不起几个星期的程序员来重做所有事情。 ;-) 这是一种边做边学（因为你可以猜到我以前从未编程过；-) 因此，我非常感谢您提供的每一点信息，并帮助我把小事做得更好。
如果有人会通过这里，我肯定会得到一些反对票 :-) 谢谢可可 圣诞快乐！
【问题讨论】：
-
最后一个代码有效吗？您还应该将刷卡设置回false..无论如何我看不出原始代码和您的..appart我只处理Y刷卡的任何区别......
-
在使用原始滑动功能时，将 preventdefault 添加到您想要的元素。然后 swu 到那个...其中函数是一个简单的类切换，而 css 是 x,y
-
我不确定你在制作动画时到底想做什么......
-
如果您真的喜欢关注我的内容，请查看我的编辑 2。在您的代码的帮助下，我已经学到了一些东西，至少我希望如此。
标签： javascript jquery html ios css