手机touch的运用

如图
   
这个是要做到当我手机向下滑动的时候那个图片隐藏变成左边这幅的效果;最开始我用的不是touch 而是滚轮事件,但是
如果是滚轮事件   在手机端就无法顺溜的显示,而且会很乱。
如果用touch事件  注意你需要的效果  我这里需要上下不停的滚动  以最后一个动作为准 ,所以我这里用的是touchend
而且我这里不需要判断左右。
initScroll: function () {
    var startX,startY,endX,endY,distanceX,distanceY;
    $('#mainContainer').bind('touchstart',function(e){
        startX = e.originalEvent.changedTouches[0].pageX;
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $('#mainContainer').bind('touchend',function(e) {
        //获取滑动屏幕时的X,Y
        endX = e.originalEvent.changedTouches[0].pageX;
        endY = e.originalEvent.changedTouches[0].pageY;
        //获取滑动距离
        distanceX = endX - startX;
        distanceY = endY - startY;
        if (distanceY < 0) {
            $('.marker-logo-icon img').slideUp();
            $('.marker-logo-icon').css('bottom', '0px');
        } else if (distanceY > 0) {
            $('.marker-logo-icon img').slideDown();
            $('.marker-logo-icon').css('bottom', '10px');

        }
    });
},
希望我的代码可以带给你帮助 谢谢!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值