コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
javascript - 这段代码里面的e.touches[0].pagex为什么老是在第一屏幕内？
PHP中文网
PHP中文网 2017-04-10 16:08:33
0
1
763
html

<p class="box" id="box">
    <ul id="ul">
        <li class="ad1"></li>
        <li class="ad2"></li>
        <li class="ad3"></li>
        <li class="ad4"></li>
    </ul>
</p>

css
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.box ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 30000px;
    height: 100%;
    -webkit-transition: transform .5s ease;
    -moz-transition: transform .5s ease;
    -ms-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
}

.box li {
    float: left;
    width: 100vw;
    height: 300px;
}
.ad1{
    background: red;
}
.ad2{
    background: green;
}
.ad3{
    background: grey;
}
.ad4{
    background: darkgoldenrod;
}
.ad5{
    background:darkseagreen;
}

js

var ul=document.getElementById('ul');
var touchx=0;
var index=0;
var lilen=ul.getElementsByTagName('li').length;
var liwidth=document.documentElement.clientWidth;

ul.addEventListener('touchstart', function (e) {
    e.preventDefault();
    touchx= e.touches[0].clientX;
    console.log(touchx);
},false);
ul.addEventListener('touchmove', function (e) {
        var offsetX= e.changedTouches[0].pageX;
        if(offsetX>touchx){
            ul.style.transform='translate3d('+(offsetX-touchx)+'px,0,0)';
        }else if(offsetX<touchx){
            console.log(1)
            ul.style.transform='translate3d('+-(touchx-offsetX)+'px,0,0)';
        }
},false);
ul.addEventListener('touchend', function (e) {
    var endtouch= e.changedTouches[0].pageX;

    if(endtouch+20<touchx){
        if(index >= lilen-1){
            ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
        }else{
            index++;
            ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
        }
    }else if(endtouch-20>touchx){
        if(index <= 0){
            ul.style.transform='translate3d(0,0,0)';
        }else{
            index--;
            ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
        }
    }else{
        ul.style.transform='translate3d('+-(index*liwidth)+'px,0,0)';
    }
},false);

我写了一段手机端幻灯的代码。这里为什么e.touches[0].pageX.都是在手机第一屏幕内，还有这段代码该如何改进才能生效呢？想了很久了，请大神指教一下。

PHP中文网
PHP中文网

认证高级PHP讲师

全員に返信(1)
左手右手慢动作
左手右手慢动作2017-04-10 16:10:33 1棟

感觉你写的逻辑太乱了，建议你最好用思维导图或者其他更加适合你的方式理清一下思路。这里有几点建议：

  • 最好统一使用changedtouches来计算，不要使用touches和targetTouches

  • 在绑定事件时劲量避免使用匿名函数，因为无法解绑

  • 最后就是理清逻辑和变量

这是我写的demo，比较简单，还有很多应该完善的问题，比如添加定时切换的功能。
定时器在初始化时添加，touchstart时关闭，touchend时重新打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>test touch</title>
    <style>
    body { margin: 0; }
    .box { width: 100%; overflow: hidden; }
    ul,li { margin: 0; padding: 0; list-style: none; }
    ul { width: 500%; overflow: hidden; transition: .5s; }
    li { width: 20%; float: left; }
    li { font-size: 40px; color: #fff; text-align: center; line-height: 150px; }
    li:nth-of-type(1) { background: orange; }
    li:nth-of-type(2) { background: red; }
    li:nth-of-type(3) { background: pink; }
    li:nth-of-type(4) { background: green; }
    li:nth-of-type(5) { background: #333; }
    </style>
</head>
<body>
    <p class="box">
        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </p>
</body>
<script>

window.onload = function() {
    var oUl = document.getElementById('test');
    var aLi = oUl.getElementsByTagName('li');
    
    var sX = 0;    // 手指初始x坐标
    var sLeft = 0; // 初始位移
    var index = 0; 
    var curLeft = 0; // 当前位移
    var disX = 0;  // 滑动差值

    oUl.addEventListener('touchstart', touchstart, false);

    function touchstart(e) {
        e.preventDefault();
        sX = e.changedTouches[0].pageX;

        // 计算初始位移
        sLeft = oUl.style.transform ? -parseInt(/\d+/.exec(oUl.style.transform)[0]) : 0;
        oUl.style.transition = 'none';

        document.addEventListener('touchmove', touchmove, false);
        document.addEventListener('touchend', touchend, false);
    }

    function touchmove(e) {
        disX = e.changedTouches[0].pageX - sX;
        curLeft = sLeft + disX;
        oUl.style.transform = 'translateX(' + curLeft + 'px)';
    }

    function touchend(e) {
        if (disX > 100) { 
            if (index != 0) {
                index -= 1;
            }
        } 
        if (disX < -100) {
            if (index != aLi.length - 1) {
                index += 1;
            };
        };
        oUl.style.transition = '.5s';
        oUl.style.transform = 'translateX(' + -index*aLi[0].offsetWidth + 'px)';
    }
}    

</script>
</html>
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート