javascript - 手指左右滑动
大家讲道理
大家讲道理 2017-04-10 15:52:50
[JavaScript讨论组]
我这个移动端的左右滑动,当你在第一次move的时候能移动但当第二次move的时候他会弹回来
一直move一是在原地,这是什么回事





    
        
        移动端触摸滑动
        
        
        
        
    

    
        

  • 中国
  • 英国
  • 美国
  • 法国
  • 德国
  • 意大利
  • 奥地利
  • 新西兰
  • 泰国
  • 新加坡
  • 韩国
  • 日本
  • 瑞典
  • 冰岛
  • 丹麦
  • 俄罗斯

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(1)
PHPz

原因就是你定位的时候那个endPos就是一个坐标差,不用.x,.x是undefined所以会回滚回去,
你最后的endPos*3 我也不知道什么意思。。

window.onload = function() {
            var startPos = null,
                endPos = null,
                slider = document.getElementById('slider');
            slider.style.width = slider.getElementsByTagName("li").length * parseInt(getStyle(slider.getElementsByTagName("li")[0], "width")) + "px";
            if (!!('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
                addEvent(self.slider, "touchstart", fnstart);
                addEvent(self.slider, "touchmove", fnmove);
                addEvent(self.slider, "touchend", fnend);
            }

            function fnstart(ev) {
                var touch = ev || event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
                startPos =touch.pageX;
            }

            function fnmove(ev) {
                if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
                var touch = event.targetTouches[0];
                var slider=document.getElementById('slider');
                endPos =touch.pageX - startPos;
                event.preventDefault();
                var _trans=getTransform(slider);
                console.log(endPos+"+++++++"+Number(_trans));
                slider.style.transform = "translateX(" + (endPos+Number(_trans)) + "px)";
            }

            function fnend() {
                if (Math.abs(endPos) > 60) {
                    var slider=document.getElementById('slider');
                    var _trans=getTransform(slider);
                    console.log(endPos+"+++++++"+Number(_trans));
                    var juli=(Math.ceil(endPos/100)*100+Number(_trans));
                    if(juli<0){
                        juli=juli>screen.width-1600?juli:screen.width-1600;
                    }else{
                        juli=0;
                    }
                    slider.style.transform = "translateX("+ juli + "px)";
                }
            }
            
            function getTransform(_dom){
                var dom=_dom;
                var transform=dom.style.transform;
                
                if(transform!=""){
                    return transform.split("(")[1].split("px")[0];
                }
                else{
                    return 0;
                }
            }

            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }

            function addEvent(obj, event, fn) {
                obj['bind' + event] = obj['bind' + event] || [];
                obj['bind' + event]['bind' + fn] = obj['bind' + event]['bind' + fn] || function() {
                    fn.call(obj);
                }
                if (typeof document.addEventListener != "undefined") {
                    obj.addEventListener(event, obj['bind' + event]['bind' + fn], true);
                } else {
                    obj.attachEvent('on' + event, obj['bind' + event]['bind' + fn]);
                }
            };
        }

实现了chrome版没有做其他兼容,主要问题就是你给transform赋值以及坐标的运算出问题了,你一直给他赋值endPos大概就是你这次滑动的距离,并不会累加

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号