[分享]css3手机滑动

CSS3的强大功能在手机端也得到了完美的体现，其中最常用的功能要数手机滑动了。现在就来看看CSS3手机滑动的实现方法。/ 新建一个touch滑动事件 / document.addEventListen...

CSS3的强大功能在手机端也得到了完美的体现，其中最常用的功能要数手机滑动了。现在就来看看CSS3手机滑动的实现方法。

/* 新建一个touch滑动事件 */
document.addEventListener('touchstart',function(event){
    /* 记录手指触摸屏幕时的位置 */
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
    /* 记录滑动开始时的时间 */
    startTime = new Date().getTime();
    touchMove = true; // 开始滑动的标记
    event.preventDefault(); // 阻止浏览器默认事件
});

document.addEventListener('touchmove',function(event){
    /* 防止触发横向滑动事件 */
    if(Math.abs(event.touches[0].pageX-startX) >= Math.abs(event.touches[0].pageY-startY)){
        touchMove = false;
        return;
    }
    /* 记录手指滑动位置 */
    moveY = event.touches[0].pageY;
    /* 根据手指滑动的距离改变元素的位置 */
    var translateY = moveY - startY; 
    /* 获取当前时间 */
    currentTime = new Date().getTime(); 
    /* 计算滑动距离 */
    slideDistance = moveY - startY; 
    event.preventDefault(); // 阻止浏览器默认事件
});

document.addEventListener('touchend',function(event){
    /* 计算时间差 */
    var timeDiffer = new Date().getTime() - startTime; 
    /* 判断条件：向下滑动距离过半且时间差小于300ms */
    if(slideDistance > window.screen.availHeight/2 || (slideDistance > 10 && timeDiffer < 300 && touchMove)){ 
        toBottom();
    } else {
        toTop();
    }
    event.preventDefault(); // 阻止浏览器默认事件
}); 

以上是CSS3手机滑动的代码，主要是使用touch事件以及一些JS代码实现，当手指滑动到一定距离、时间等条件时，就会触发相应的事件从而实现手机滑动效果。