js： touch 事件，滑动的实现

来源：互联网发布：js声明二维数组编辑：程序博客网时间：2024/05/16 17:35

touch 事件：

<pre name="code" class="javascript"><script>        var slider = {            // 判断设备是否支持touch事件            touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,            slider: document.getElementById('slider'),              // 事件            events: {                index: 0,                                       // 显示元素的索引                slider: this.slider,                            // this为slider对象                icons: document.getElementById('icons'),                icon: this.icons.getElementsByTagName('span'),                handleEvent: function(event) {                    // this指events对象                    var self = this;                      if (event.type == 'touchstart') {                        self.start(event);                    } else if(event.type == 'touchmove') {                        self.move(event);                    } else if(event.type == 'touchend') {                        self.end(event);                    }                },                  // 滑动开始                start: function(event) {                    event.preventDefault();                      // 阻止触摸事件的默认动作,即阻止滚屏                    var touch = event.touches[0];                // touches数组对象获得屏幕上所有的touch，取第一个touch                    startPos = {                                 // 取第一个touch的坐标值                        x: touch.pageX,                        y: touch.pageY,                        time: +new Date                    };                      // 绑定事件                    this.slider.addEventListener('touchmove', this, false);                    this.slider.addEventListener('touchend', this, false);                },                  // 移动                move: function(event) {                    event.preventDefault();                      // 阻止触摸事件的默认行为，即阻止滚屏                      // 当屏幕有多个touch或者页面被缩放过，就不执行move操作                    if (event.touches.length > 1 || event.scale && event.scale !== 1) return;                    var touch = event.touches[0];                    endPos = {                        x: touch.pageX - startPos.x,                        y: touch.pageY - startPos.y                    };                      // 执行操作，使元素移动                    this.slider.className = 'cnt';                    this.slider.style.left = -this.index * 600 + endPos.x + 'px';                },                  // 滑动释放                end: function(event) {                    var duration = +new Date - startPos.time;    // 滑动的持续时间                      this.icon[this.index].className = '';                    if (Number(duration) > 100) {                             // 判断是左移还是右移，当偏移量大于50时执行                        if (endPos.x > 50) {                            if(this.index !== 0) this.index -= 1;                        } else if(endPos.x < -50) {                            if (this.index !== 4) this.index += 1;                        }                    }                      this.slider.className = 'cnt f-anim';                    this.slider.style.left = -this.index*600 + 'px';                    this.icon[this.index].className = 'curr';                      // 解绑事件                    this.slider.removeEventListener('touchmove', this, false);                    this.slider.removeEventListener('touchend', this, false);                }            },                  // 初始化            init: function() {                // this指slider对象                var self = this;                  // addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性                if(!!self.touch) self.slider.addEventListener('touchstart', self.events, false);            }        };          slider.init();        </script>

<pre name="code" class="javascript">

其中利用了-webkit-transition:<span style="color: rgb(17, 17, 17); font-size: 12.8000001907349px; line-height: 16.8479995727539px; white-space: pre-wrap;"> [property(css属性 可选）],[duration（持续时间 默认为0）],[timing-function（ease linear 等 可选）],[delay（延迟 可选）]，可以实现css效果的过渡。</span>

<span style="color: rgb(17, 17, 17); font-size: 12.8000001907349px; line-height: 16.8479995727539px; white-space: pre-wrap;">*{font-family:微软雅黑;margin:0;padding:0;} 作用：可以使body margin 为0，具体原理未知。</span>

<span style="color:#111111;"><span style="font-size: 13px; line-height: 16.8479995727539px; white-space: pre-wrap;">问题：无法实现点击的操作，由于</span></span><pre name="code" class="javascript">if(!!self.touch) self.slider.addEventListener('touchstart', self.events, false);

0 0