亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁技術文章
文章詳情頁

css3 - 淘寶網上這種抵抗反彈的效果如何做?

瀏覽:82日期:2022-06-25 08:36:34

問題描述

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該怎么實現

問題解答

回答1:

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

回答2:

css3 - 淘寶網上這種抵抗反彈的效果如何做?

下面的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>回答3:

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

回答4:

你是說彈性滾動嗎

body{ overflow:scroll; -webkit-overflow-scrolling:touch}回答5:

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

標簽: 淘寶
相關文章:
主站蜘蛛池模板: 亚洲精品午夜级久久久久 | 国产精品免费_区二区三区观看 | 麻豆精品久久精品色综合 | 欧美成a人片在线观看久 | 在线观看视频色 | 咪咪久久 | 色爱区综合激月婷婷激情五月 | 在线视频观看国产 | 黄网址大全免费观看免费 | h国产| 1024 在线播放 | 国产一区二区三区四区 | 日韩精品一区二区在线观看 | 六月激情综合 | 国产成人av性色在线影院 | 国产久草视频在线 | 又粗又硬的aaaaaaa毛片 | 亚洲欧美色综合一区二区在线 | 请以你的名字呼唤我免费观看 | 韩国一级做a爰片性色毛片 韩国一级做a爱性色毛片 | 亚洲欧美日韩特级毛片 | 青青啪| 国产不卡视频在线播放 | 久久99亚洲综合精品首页 | 日本亚洲乱码中文字幕影院 | 国产精品久久久久久久久久直 | 亚洲 自拍 欧美 另类小说 | 亚洲天堂色图 | 羞羞一区二区三区四区片 | 人成免费a级毛片 | 国产高清精品毛片基地 | 日本96在线精品视频免费观看 | jizz中国zz女人18 | 日本国产欧美色综合 | 黄色一级短视频 | 蜜桃视频一区 | 在线国产播放 | 亚洲精品视频在线免费 | 欧美一进一出 | 国产精品合集久久久久青苹果 | 午夜一级毛片免费视频 |