Tagged with " mobile"
Apr 14, 2014 - javascript, 前端    No Comments

对于移动端浏览器touch事件的研究总结(6)gesture

在移动设备上感觉除了最最常用的单指滑动外,第二常用的就是双指的拉伸,旋转等等了。所以苹果在ios 2.0的safari中又引入了一组手势事件。当两个手指触摸屏幕时就会产生手势,或拉伸放大,或旋转。

gesture事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend三个事件回调:

  • gesturestart: 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
  • gesturechange: 当触摸屏幕的任何一个手指的位置发生变化时触发。
  • gestureend: 当任何一个手指从屏幕上面移开时触发。

Read more »

Apr 8, 2014 - javascript, 前端    7 Comments

对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的。最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起。其实就是一个简单的判断手指滑动方向让页面滚动一屏的高度。

先来看代码:

$("body").on("touchstart", function(e) {
    e.preventDefault();
	startX = e.originalEvent.changedTouches[0].pageX,
	startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
    e.preventDefault();
	moveEndX = e.originalEvent.changedTouches[0].pageX,
	moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;

    if ( X > 0 ) {
        alert("left 2 right");
    }
    else if ( X < 0 ) {
        alert("right 2 left");
    }
    else if ( Y > 0) {
        alert("top 2 bottom");
    }
    else if ( Y < 0 ) {
        alert("bottom 2 top");
    }
    else{
        alert("just touch");
    }
});

Read more »

Apr 7, 2014 - javascript, 前端    No Comments

对于移动端浏览器touch事件的研究总结(3)一个圆形跟随手指滑动的例子

效果很简单,单根手指在屏幕上点击后页面上出现一个红色的圆形图案,手指在屏幕上滑动,圆形图案跟随手指移动而移动,手指离开屏幕,圆形图案消失。

功能正好一一对应手指的三种状态:touchstart,touch move,touchend

代码如下:

touchstart:

function touchStart(event) {
    event.preventDefault(); // 这个方法阻止事件的默认动作,触摸事件的默认动作是滚屏,我们不想屏幕动来动去的,所以先调用一下这个函数。
    if (spirit || ! event.originalEvent.changedTouches.length) { // 是否已经有了一个spirit 或者 是否已经有了一根手指放在了屏幕上
        return;
    }
    startX = event.originalEvent.changedTouches[0].pageX;
    startY = event.originalEvent.changedTouches[0].pageY;
    spirit = $("<div></div>");
    spirit.addClass("spirit");
    spirit.css({"left":startX, "top":startY});
    $body.append(spirit);
}

Read more »

Apr 4, 2014 - javascript, 前端    No Comments

对于移动端浏览器touch事件的研究总结(2)

先放一段对于昨天文章的补充:

event.touches 是与屏幕接触的所有手指的数组。而不仅仅是位于目标 DOM 元素上的那些。所以改用 event.targetTouches 或 event.changedTouches 要更实用一些。前者主体是DOM,后者主体是事件。我个人一般喜欢用changedTouches。


还有就是在写原生JS的touch事件和用Jquery写touch事件的一些小小的区别:

先来看两段代码:

第一段,不会alert的代码:

$("body").on('touchstart', function(event){ 
    alert(event.changedTouches.length);
});

第二段,可以正常alert出内容的代码:

$("body").on('touchstart', function(){ 
    alert(event.changedTouches.length);
});

Read more »

Pages:12»