WEB手机端上下切换效果

浏览数：22 / 时间：2015年06月11日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>slider</title>
<style>
*{
    padding:0;
    margin:0;
}
html ,
body ,
#slider {
    height:100%;
    overflow: hidden;
}
.s-list{
    height:400%;
    -webkit-transition:.3s;
    -webkit-transform:translate3d(0px,0px,0px);
}
.s-list>li{
    height:25%;
}
.s-list>li:nth-child(1){background:#00be9c;}
.s-list>li:nth-child(2){background:#50d78a;}
.s-list>li:nth-child(3){background:#2c97df;}
.s-list>li:nth-child(4){background:#9c56b8;}
</style>
</head>
<body>
      
  
  
<section id="slider">
    <ul class="s-list">
        <li>第一屏</li>
        <li>第二屏</li>
        <li>第三屏</li>
        <li>第四屏</li>
    </ul>
</section>
  
  
  
<script>
      
    function slider( id ){
        //获取所要的 DOM 元素
        var oSlider = document.getElementById(‘slider‘);
        var oUl = oSlider.getElementsByTagName(‘ul‘)[0];
        var aLi = oUl.getElementsByTagName(‘li‘);
        var winHeight = document.body.clientHeight;
        var startY , offsetY , num = 0 , addNum = 0 ;
  
  
        //开始
        var sliderStart = function( event ){
            this.startY = event.touches[0].pageY;
        }
  
  
        //移动
        var sliderMove = function( event ){
            //单手操作才执行
            if ( event.targetTouches.length == 1 ) {
                event.preventDefault();　　　　　　　　　　　　　　　　　　　　
                //获取移动的距离
                this.offsetY = event.targetTouches[0].pageY - this.startY ;

                var addNum = this.offsetY + parseInt(window.getComputedStyle( oUl  , null)[‘-webkit-transform‘].replace(/[a-z()]/g , ‘‘).split(‘,‘)[5]);

                oUl.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+ addNum +‘px,0px)‘;
            }
        }
  
  
        //结束
        var sliderEnd = function(){
  
            //负数为往上，正数为往下
            if ( this.offsetY > 0 ) {
                // console.log(‘向上‘);
                if ( num > 0 ) {
                    num--;
                }else{
                    nun = 0;
                }
            }else if ( this.offsetY < 0 ) {
                // console.log(‘向下‘);
                if ( num < aLi.length - 1 ) {
                    num++;
                }else{
                    num = aLi.length -1;
                }
            }
  
            //真实的切换
            oUl.style[‘-webkit-transform‘] = ‘translate3d(0px,‘+ -num*winHeight +‘px,0px)‘;
  
            //让累加数值为当前页面切换到的数值
            addNum = -num*winHeight;
        }
  
  
        //让最顶层的 DIV 处理事件，然而 ul 根据，最顶层的 DIV 操作来移动
        oSlider.addEventListener(‘touchstart‘ , sliderStart);
        oSlider.addEventListener(‘touchmove‘ , sliderMove);
        oSlider.addEventListener(‘touchend‘ , sliderEnd);
    }
  
    slider(‘slider‘);
  
</script>
</body>
</html>