扫码关注官方订阅号
聚划算页面http://m.juhuasuan.com顶部的横向滚动导航,滑到最后一个时,会有弹性,请问事怎么做的呢?][1]
首先这里是用了transform: translate(-644px, 0px) translateZ(0px);来改变位置。然后通过transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;来实现弹性动画的效果。原理上就是当拖动位置的距离大于宽度要求的极限值时,鼠标onMouseUp事件时把位置再拉回那个极限值。就是这样吧。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
首先这里是用了transform: translate(-644px, 0px) translateZ(0px);
来改变位置。
然后通过transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;
来实现弹性动画的效果。
原理上就是当拖动位置的距离大于宽度要求的极限值时,鼠标onMouseUp事件时把位置再拉回那个极限值。
就是这样吧。