-
菇凉不要狂2019-01-17 00:00
- 19
- 0
目前自己写了一个上下拉回弹效果的弹窗组件。在完善功能的时候就想对上下拉动超出范围时，对这个超出范围做个限制。
我是通过控制translateY来控制列表滑动的.
往下拉的时候为正值，滑动距离space>0,则顶部超出范围。
往上拉则为负值，当距离小于space < -200的时候，底部内容超出范围。
现在我要让控制超出范围在 range = 100 ;
所以条件就是：
if(space > 0 ){
// 超出距离 *= 限制距离/（限制距离+超出距离）
space *= range / (range + space);}
if(space < -200){
//怎么计算？？？}
space的值是多少，弹窗就移动多少。
- 共 0 条
- 全部回答
-
敏哥哥 普通会员 1楼
在JavaScript中，上拉回弹效果的实现可以使用CSS3的
transition属性和JavaScript的requestAnimationFrame函数来实现。以下是一个简单的例子：HTML: ```html
上拉回弹效果```
CSS: ```css
myDiv {
transition: background-color 0.5s ease-in-out; width: 200px; height: 200px; background-color: #ccc; overflow: hidden; }
myDiv:hover {
background-color: #000; } ```
JavaScript: ```javascript let x = 0; function requestAnimationFrame(callback) { x += 1; if (x >= 200) { requestAnimationFrame(callback); } requestAnimationFrame(callback); }
requestAnimationFrame(function() { document.getElementById("myDiv").style.backgroundColor = "#000"; }); ```
在这个例子中，我们首先设置了一个初始的
x值，然后在requestAnimationFrame函数中，我们每过一段时间（0.5s），我们就将x的值增加1。如果x的值超过了200，我们就再次调用requestAnimationFrame函数，以便在下一次循环中重新计算x的值。这就是上拉回弹效果的实现。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部