当前位置：文江博客话题详情

JavaScript jQuery 移动web开发

手指左右滑动

发布于 2022-09-01 18:22:38 字数 3728 浏览 9 评论 0

我这个移动端的左右滑动，当你在第一次move的时候能移动但当第二次move的时候他会弹回来
一直move一是在原地，这是什么回事


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>移动端触摸滑动</title>
        <meta name="author" content="rainna" />
        <meta name="keywords" content="rainna's js lib" />
        <meta name="description" content="移动端触摸滑动" />
        <style>
            * {margin: 0;padding: 0;}
            li {list-style: none;}
            .m-slider {width: 100%;margin: 50px auto;overflow: hidden;background: #ccc;position: relative;border: 1px solid red;height: 80px;}
            .m-slider ul {position: absolute;top: 0;left: 0;height: 30px;}
            .m-slider li {float: left;width: 100px;height: 80px;line-height: 80px;overflow: hidden;text-align: center;}
        </style>
    </head>

    <body>
        <div class="m-slider">
            <ul class="cnt" id="slider"><li>中国</li><li>英国</li><li>美国</li><li>法国</li><li>德国</li><li>意大利</li><li>奥地利</li><li>新西兰</li><li>泰国</li><li>新加坡</li><li>韩国</li><li>日本</li><li>瑞典</li><li>冰岛</li><li>丹麦</li><li>俄罗斯</li></ul>
        </div>
    </body>
    <script>
        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];
                endPos =touch.pageX - startPos;
                event.preventDefault();
                document.getElementById('slider').style.WebkitTransform = document.getElementById('slider').style.transform = "translateX(" + endPos + "px)";
            }

            function fnend() {
                
            }

            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]);
                }
            };
        }
    </script>
</html>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

素染倾城色 2022-09-08 18:22:38

原因就是你定位的时候那个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大概就是你这次滑动的距离，并不会累加

~没有更多了~

关于作者

好久不见√

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文