移动端拖动集合(适配下的边界值,点透问题,细节处理,惯性的运用,行内控制宽度)

html.

    <section class="page allCelebrity">            <div class="c-title"><i></i><span>历史名人</span></div>            <div class="celebrity">                <div class="input">                    <i class='fl'></i>                    <input type="" name="" placeholder='请输入您想要了解的名人(限广东)'>                </div>                <ul class="list clearfix">                    <!-- <li class='last'><a href="javascript:void(0)"><span>等等</span></a></li> -->                </ul>            </div>            <div class="details">                <!-- <img src='./img/celebrity1.gif' alt="" width="100%" height='100%'>                <div class="des">                    <p></p>                </div>                <div class="close"></div> -->            </div>        </section>

---

行内控制宽度

css==>.list li 的处理

.allScenic .scenic{    width: 100%;}.allScenic .title {    width: 370px;    margin: 0 20px;}.scenic ul li {    height: 105px;    padding: 15px 20px;}.scenic ul li a {    display: block;}.scenic ul li a img {    display: block;    width: 105px;    height: 105px;    border-radius: 5px;}.scenic .introduce {    margin-left: 15px;    width: 250px;    height: 105px;}.scenic .introduce p {    margin-top: 8px;}.scenic .introduce .s-title {    font-size: 20px;    color: #333;}.scenic .introduce .des {    color: #00A7E1;}.allScenic .more {    margin: 0 20px;}    /*allCelebrity strat*/.allCelebrity {    width: 100%;    height: 508px;    background: url('../img/celebrity-bg.jpg') no-repeat center center/cover;}.allCelebrity .c-title {    width: 180px;    height: 60px;    padding: 60px 0;    margin: 0 auto;}.allCelebrity .c-title i {    display: inline-block;    width: 50px;    height: 50px;    background: url('../img/celebrity-icon1.png') no-repeat center center/100% 100%;    vertical-align: middle;}.allCelebrity .c-title span {    font-size: 30px;    font-family: 'KaiTi';    color: #fff;    vertical-align: middle;}.celebrity {    margin: 0 20px;}.celebrity .input{    width: 100%;    height: 42px;    line-height: 42px;    background: #fff;    border-radius: 21px;}.celebrity .input i {    display: block;    width: 18px;    height: 18px;    margin: 12px 10px 0 60px;    background: url('../img/search.png') center center/cover;}.celebrity .input input {    width: 280px;    border: none;    outline: none;    color: #666;}.celebrity .list {    margin-top: 20px;}.celebrity .list li {    display: inline-block;    overflow: hidden;    padding: 5px 10px;    margin: 5px;    background: #fff;    border-radius: 30px;    white-space: nowrap;    text-overflow: ellipsis;}.celebrity .list li a {    display: inline;    text-align: center;}.celebrity .list li a i {    display: inline-block;    width: 16px;    height: 16px;    margin-right: 5px;    background: url('../img/celebrity-icon.png') center center/cover;    vertical-align: middle;}.celebrity .list li a span {    color: #999;    vertical-align: middle;}.allCelebrity .details {    display: none;    position: fixed;    top: 0;    width: 100%;    background: rgba(0,0,0,.7);    opacity: 0;    z-index: 100;}.allCelebrity .details img {    display: block;    width: 170px;    height: 240px;    margin: 40px auto;}.allCelebrity .details .des {    margin: 0 20px;}.allCelebrity .details .des p {    text-indent: 2em;    color: #fafafa;    margin-bottom: 20px;}.allCelebrity .details .close {    position: absolute;    top: 15px;    right: 20px;    width: 25px;    height: 25px;    background: url('../img/close.png') center center/cover;}

---

适配下的边界值,点透问题,细节处理,惯性的运用

js.

// 名人(function () {    var oUl = document.querySelector('.celebrity .list'),        last = oUl.querySelector('.last'),        details = document.querySelector('.allCelebrity .details'),        targetData = data.AllCelebrity;        // <li class='last'><a href="javascript:void(0)"><span>等等</span></a></li>    for (var i = 0; i < targetData.length; i++) {        create(targetData[i],i);    }    function create(obj,i){        var li = document.createElement('li');        li.index = i;        li.innerHTML = `            <a href="javascript:void(0)"><i></i><span>${obj.name}</span></a>        `;        oUl.insertBefore(li,last);    }    oUl.addEventListener('click',click,false);    function click(e){        var e = e || window.event,            target = e.target || e.srcElement;        if(target.tagName.toLowerCase() == 'span') {            // 拿到li;            var parent = target.parentNode.parentNode;            createDetail(parent.index);        }    }    /*        <img src='./img/celebrity1.gif' alt="" width="100%" height='100%'>        <div class="des">            <p></p>        </div>        <div class="close"></div>     */    function createDetail(i) {        // 阻止默认滚轮事件        // document.addEventListener('touchmove',move,false);        var str = `            <img src='./img/celebrity${i+1}.gif' alt="" width="100%" height='100%'>            <div class="des">                <p>${targetData[i].experience}</p>            </div>        `;        details.innerHTML = str;        // 关闭按钮 事件.        var close = document.createElement('div');        close.className = 'close';        // 防止误触 ,点透问题.        var start = {x:0,y:0},end = {x:0,y:0};        close.addEventListener('touchstart',function(e){            start.x = e.changedTouches[0].pageX;            start.y = e.changedTouches[0].pageY;        });        close.addEventListener('touchend',function(e){            end.x = e.changedTouches[0].pageX;            end.y = e.changedTouches[0].pageY;            if(end.x === start.x && end.y === start.y){                e.stopPropagation();                var timer = null;                AnimateTime(details,{opacity:0},'500','easeIn',function(){                    clearTimeout(timer);                    timer = setTimeout(function(obj){                        obj.innerHTML = '';                        obj.style.display = 'none';                        obj.style.marginTop = '0';                    },500,this);                })                // 恢复默认滚轮事件                document.removeEventListener('touchmove',move,false);            }        })        details.appendChild(close);        // 显示        AnimateTime(details,{opacity:100},'500','easeIn',function(){            this.style.display = 'block';            //添加details 拖动事件            addEvent(this);        })    }    // 默认滚轮事件    function move(e){        e.preventDefault();    }    // details 拖动事件    function addEvent(obj){        console.log(details.offsetHeight); //总高        console.log(window.screen.height/scale); //缩放过的屏幕高        // 边界值 = 总高 - 缩放过的屏幕高        var start = {            y:0        },end = {            y:0        },        startTime = 0        // marginTop 值        val = 0,        // 下拉的边界值. 负值        boundaryValue = details.offsetHeight-(window.screen.height/scale);        obj.addEventListener('touchstart',touch,false);        obj.addEventListener('touchmove',touch,false);        obj.addEventListener('touchend',touch,false);        function touch(e){            var distance = 0;            switch(e.type){                case 'touchstart':                e.stopPropagation();                start.y = e.changedTouches[0].pageY;                this.style.WebkitTransition = this.style.transition = '';                // 初始化                console.log(getStyle(this,'marginTop'));                this.startY = getStyle(this,'marginTop');                startTime = Date.now();                    break;                case 'touchmove':                e.stopPropagation();                //阻止默认拖动事件                e.preventDefault();                end.y = e.changedTouches[0].pageY;                val = end.y - start.y + this.startY;                // 边界限制                if(val > 0 ){ //拖动系数. 拉力的感觉                    val *= 0.2;                }else if( val < -boundaryValue){  //最后.                    val = (end.y - start.y)*0.2 + this.startY;                }                this.style.marginTop = val + 'px';                    break;                case 'touchend':                e.stopPropagation();                this.style.WebkitTransition = this.style.transition = '.5s';                // 防止点击. 重新获取                end.y = e.changedTouches[0].pageY;                /*惯性*/                var T = Date.now()-startTime;                    S =  end.y - start.y;                    v = (S/T)*100;                console.log(v);                val +=v;                 // 边界值 = 总高 - 缩放过的屏幕高                 // console.log(val ,boundaryValue);                 if(val > 0){                    val = 0                 }else if(val <= -boundaryValue ){                    val = - boundaryValue;                 }                 this.style.marginTop = val + 'px';                    break;            }        }    }})();function getStyle(obj,attr){    var val = obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];    return parseInt(val);}

数据有点大,就不放了.

看看演示.
..