css3 - 淘宝网上这种抵抗反弹的效果如何做?
怪我咯
怪我咯 2017-04-17 11:38:59
0
5
1314

https://jhs.m.taobao.com/m/index.htm?locate=icon-2&spm=a215s.7406091.1.icon-2&scm=2027.1.3.1001#!3000

上面的横向滚动条,滑到边界就会有个拉伸的效果,然后再反弹回去
用css3和js该怎么实现

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回覆(5)
洪涛

局部滾動的話 最簡單的方法就是用 IScroll 。直接實例化 就可以。 new IScroll("",) ""裡面是選擇器。

巴扎黑

下面的JS程式碼可以作為參考,不僅可以實現回彈,還能反應出來手勢的快速滑動。

<script type="text/javascript">
        //得到各种元素
        var nav = document.querySelector("nav");
        var navul = document.querySelector("nav ul");
        var navullis = document.querySelectorAll("nav ul li");
        var navW = parseInt(window.getComputedStyle(nav , null)['width']);

        //宽度
        navul.style.width = navullis.length * 82 +"px";

        nav.addEventListener("touchstart",touchstartHandler);
        nav.addEventListener("touchmove",touchmoveHandler);
        nav.addEventListener("touchend",touchendHandler);

        var startX;
        var nowX = 0;
        var dX;

        var lastTwoPoint = [0,0];

        //开始滑动
        function touchstartHandler(event){
            navul.style.webkitTransition = "none";    //去掉过渡
            navul.style.transition = "none";    //去掉过渡
            startX = event.touches[0].pageX;    //记录起点
        }

        //滑动过程
        function touchmoveHandler(event){
            event.preventDefault();
            dX = event.touches[0].pageX - startX;    //差值

            //反映差值
            navul.style.webkitTransform = "translateX(" + (nowX + dX) + "px)";
            navul.style.transform = "translateX(" + (nowX + dX) + "px)";

            //记录最后两点的x值
            lastTwoPoint.shift();
            lastTwoPoint.push(event.touches[0].pageX);
        }

        //结束滑动
        function touchendHandler(event){
            nowX += dX;

            //多走最后两点路程的5倍路程
            nowX += (lastTwoPoint[1] - lastTwoPoint[0]) * 5;
            if(nowX > 0){
                nowX = 0;
            }

            if(nowX < -parseInt(navul.style.width) + navW){
                nowX = -parseInt(navul.style.width) + navW;
            }

            console.log(-parseInt(navul.style.width) + navW)
            //过渡时间
            //非线性衰减
            var t = Math.sqrt(Math.abs(lastTwoPoint[1] - lastTwoPoint[0])) / 10;

            navul.style.webkitTransition = "all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s"; 
            navul.style.transition = "all " + t + "s cubic-bezier(0.1, 0.85, 0.25, 1) 0s"; 

            //反映多走的5倍路程:
            navul.style.webkitTransform = "translateX(" + nowX + "px)";
            navul.style.transform = "translateX(" + nowX + "px)";
        }
    </script>
伊谢尔伦

iscroll 就能做這個效果。如果你是問原生實作的話,可以去看看原始碼。
傳送門

左手右手慢动作

你是說彈性滾動嗎

body{
     overflow:scroll;
     -webkit-overflow-scrolling:touch
}
黄舟

最近我也在用IScroll 做項目,發現越多來安卓5.0以後的有部分手機不相容,特別是在做單頁的時候,最近我在用這個Swiper [1]: http://www .swiper.com.cn/ ,文檔是中文的,出了幾個版了,目前還沒有碰到有兼容的問題

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板