移动端触屏滚动

本文最后更新于：2023年3月30日 下午

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width user-scalable=no" />
<title>无标题文档</title>
<style type="text/css">
*{ margin: 0;padding: 0;list-style: none}
#div1{ width: 470px;height: 150px;margin: 60px auto 0px;position: relative;overflow: hidden;}
#div1 ul{ position: absolute;left: 0}
#div1 ul li{ float: left}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var div1 = document.getElementById('div1');
        var oUl = div1.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var bBtn = true;
        var iNow = 0;
        var timeNow = 0;
        var w = aLi[0].offsetWidth;
        oUl.style.width = aLi.length * w + 'px';
        // 阻止默认的行为
        document.ontouchmove = function(ev) {
            ev.preventDefault();
        }
        oUl.ontouchstart = function(ev) {
            var touchs = ev.changedTouches[0];
            var downX = touchs.pageX;
            var downLeft = this.offsetLeft;
            // 按下时的时间
            timeNow = Date.now();
            oUl.ontouchmove = function(ev) {
                var touchs = ev.changedTouches[0];
                if (this.offsetLeft >= 0) {
                    if (bBtn) {
                        downX = touchs.pageX;
                        bBtn = false;
                    }
                    this.style.left = (touchs.pageX - downX) / 3 + 'px';
                } else if (this.offsetLeft <= div1.offsetWidth - this.offsetWidth) {
                    if (bBtn) {
                        downX = touchs.pageX;
                        bBtn = false;
                    }
                    this.style.left = (touchs.pageX - downX) / 3
                        + (div1.offsetWidth-this.offsetWidth) + 'px';
                } else {
                    this.style.left = touchs.pageX - downX + downLeft + 'px';
                }
            }
            oUl.ontouchend = function(ev) {
                var touchs = ev.changedTouches[0];
                oUl.ontouchmove=null;
                oUl.ontouchend=null;
                // 如果滑动大于图片的三分之一或者快速滑动时候
                if (Math.abs(touchs.pageX-downX) > w / 3
                    || ((Date.now() - timeNow) < 300) && (Math.abs(touchs.pageX-downX) > 30)) {
                    if (touchs.pageX < downX) {
                        if (iNow !== aLi.length - 1) {
                            iNow++;
                        }
                    } else {
                        if (iNow !==0) {
                            iNow--;
                        }
                    }
                }
                startMove(this, {'left': -iNow * w});
            }
        }
    }
</script>
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
        </ul>
    </div>
</body>
</html>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
;
//通过class获取元素
function getClass(cls) {
    var ret = [];
    var els = document.getElementsByTagName('*');
    for (var i = 0; i < els.length; i++) {
        // 判断els[i]中是否存在cls这个className;.indexOf("cls")判断cls存在的下标，如果下标>=0则存在;
        if (els[i].className === cls || els[i].className.indexOf('cls') >= 0
            || els[i].className.indexOf(' cls') >= 0
            || els[i].className.indexOf(' cls ') > 0) {
            ret.push(els[i]);
        }
    }
    return ret;
}
function getStyle(obj, attr) {
    // 解决JS兼容问题获取正确的属性值
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function startMove(obj, json, fun) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var isStop = true;
        for (var attr in json) {
            var iCur = 0;
            // 判断运动的是不是透明度值
            if (attr === 'opacity') {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }
            console.log(iCur);
            var ispeed = (json[attr] - iCur) / 8;
            // 运动速度如果大于0则向下取整，如果小于0想上取整；
            ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
            // 判断所有运动是否全部完成
            if (iCur !== json[attr]) {
                isStop = false;
            }
            // 运动开始
            if(attr === 'opacity') {
                obj.style.filter = 'alpha:(opacity:' + (iCur + ispeed) + ')';
                obj.style.opacity = (iCur + ispeed) / 100;
            }else{
                obj.style[attr] = iCur+ispeed + 'px';
            }
        }
        // 判断是否全部完成
        if (isStop) {
            clearInterval(obj.timer);
            if (fun) {
                fun();
            }
        }
    }, 30);
}

手機掃描打開：

developer
#原创 #javaScript
移动端触屏滚动
https://seven3.site/js/移动端触屏滚动/
作者
Seven3s
发布于
2015年3月4日
许可协议