首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生JS实现移动端滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: ? 1. 准备工作 什么是移动端的 Touch事件?...clientY:73    // 触摸相对于浏览器的 viewport 上边缘的 Y 坐标,不会包括上边的滚动距离。 screenX:2202  // 触摸相对于屏幕左边缘的 x 坐标。...先来张示意图,怎么通过 js 让列表滑动起来 ?...限制滑动区间 到上面一步,我们已经可以实现列表的滑动了,但是也存在一个问题,就是向上或者向下的时候没有限制,上下可以无限的滑动,甚至再用力,就看不到列表了。...我们限定只要手指离开时,上一次的滑动距离加上本次的距离 >0的时候,就让它触发反弹,并且反弹回 0的位置,也就是两次滑动的距离和 =0。 ?

10.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vue 界面在苹果手机上滑动点击事件等卡顿解决方案

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1)....滑动页面卡顿,(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。...(头部导航)写在滑动部位外部,在使用绝对定位进行布局,以此解决问题 (2).vue中使用v-if导致的界面第一次无法滑动 解决方法:将v-if改成v-show进行展示,解决界面进入之后不能滑动的问题 二....点击事件响应缓慢 (1).安装fastclick (npm install fastclick -S) (2).在main.js中设置方法 import FastClick from 'fastclick...解决方法:在main.js中添加下面的代码 FastClick.prototype.focus = function(targetElement) { var length; // Issue

    1.8K30

    商品添加到购物车动画getBoundingClientRect获取元素位置

    联动菜单 1.1 用户点击左侧导航栏会跳转到相应的内容 这个很简单,给导航栏的每一个元素加一个点击事件,其实也可以通过a标签的点来实现 <li v-for="(item, index) in navs...1.2 用户<em>滑动</em>右侧的内容左侧的导航栏会响应式改变 右侧内容监听一个scroll事件,当触发<em>滑动</em>事件的时候获取粘性定位在顶部的标题,根据标题使导航栏定位到相应的li var obj = element.getBoundingClientRect...按钮<em>缓慢</em>弹出 当我们点击添加按钮的时候其他的内容会<em>缓慢</em>弹出,这个是靠css的动画实现的。 我们先将个数减少按钮和被选中物品个数num的left设为48px,使其被隐藏。...pointPre"); inner.removeAttr("style"); }, 1000); //这里的延迟值和小球的运动时间相关 }, 1); } 注意:...中规定的小球运动时间为1s,所以在小球1s运动完以后会令它恢复到原来的位置,你想想,小球一共就只有那么几个,如果不恢复的话下次用户点击了小球就不够啊… 总结 以上是饿了么购物车模块主页面的几个主要技术

    1.6K20

    导航栏滚动吸顶并自动高亮和点击跳转

    点击时则会滑动至其内容所在位置。具体效果为下图样式。 ?...实现方法 正常情况下我们点击自动定位到其所在位置一般用id的方式,但是这种方式有一个缺陷就是无法实现滚动条缓动效果,而且带url上还会通过hash的方式显示出ID,另外也无法实现滚动到内容所在位置自动高亮导航栏...我这次采用的是react来写,具体思路都是相同的,无论你用的是vue还是angular 还是使用jq还是原生js,都是一样的。...无法定位到最下方,结果导致程序无限循环的bug, 通过下面的代码应该可以明白此变量的意义*/ let prevScrollTop = null; let isToTop = false;//点击时滚动条是向上还是向下...ispeed } }, 30) } 整个功能到此就已经完全实现好了,实现了滚动条滚动时自动高亮导航栏,并超过导航栏位置自动吸顶效果,同时点击导航栏滚动条缓动至位置

    10.5K50

    Redux进阶(Immutable.js) 更好的阅读体验Immutable.js原生Js遇到的问题使用Immutable解决问题使用Immutable需要注意的参考

    原生JS交互不友好 (通过Immutable生成的对象在操作上与原生JS不同,如访问属性,myObj.prop1.prop2.prop3 => myImmutableMap.getIn([‘prop1...不适合经常修改的简单对象 (Immutable的性能比原生慢,如果对象简单,并且经常修改,不适合用) 5....破坏JS原生对象的引用,造成性能低下 (toJs每次都会返回一个新对象) 原生Js遇到的问题 原生Js遇到的问题 // 场景一 var obj = {a:1, b:{c:2}}; func(obj);...export default BaseComponent; 代码来源链接:https://juejin.im/post/5948985ea0bb9f006bed7472 使用Immutable需要注意的...使用Immutable需要注意的 1.

    1.3K51

    JS滑动滚动的n种方式

    JS滑动滚动的n种方式 # 阅读本文,你将: 了解原生JS实现页面滚动的多种方式 了解这多种方式可以对应上的效果以及推荐的应用场景 多个滑动方面的坑以及相应(如果有)的解决方案 获得一些有用的函数...false); element.scrollIntoView({block: "end"}); scrollIntoView对页面元素调用,会滚动元素的父容器,将该元素滚动到浏览器的可视区域 这是对hash点定位的进化升级...,对于常用框架由于使用了hashRouter导致点定位失效的情况是一种不错的补偿 1.2 API介绍 alignToTop可选 一个Boolean值: 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐...1.3 浏览器的支持度 1.4 示例与推荐使用场景 原始位置图 我们定位如图红框的元素,从顶部开始示例 1.4.1 scrollIntoVIew() 页面滑动至父级容器,但是子项并没有被滑动到可视区域...1.4.2 scrollIntoView(false) 页面滑动到底部,该元素从下方进入可视区域 1.4.3 scrollIntoView({block:"center",inline:"center

    6.3K10

    在目标检测中如何解决小目标的问题?

    图像金字塔和多尺度滑动窗口检测 一开始,在深学习方法成为流行之前,对于不同尺度的目标,通常是从原始图像开始,使用不同的分辨率构建图像金字塔,然后使用分类器对金字塔的每一层进行滑动窗口的目标检测。 ?...然而,这种方法通常是缓慢的,虽然构建图像金字塔可以使用卷积核分离加速或简单粗暴地缩放,但仍需要做多个特征提取,后来有人借其想法想出一个特征金字塔网络FPN,在不同层融合特征,只需要一次正向计算,不需要缩放图片...特征的计算是在每个图像的尺度上独立进行的,这是很缓慢的。(b)最近的检测系统选择只使用单一尺度的特征以更快地检测。...SSH的网络结构 合适的训练方法SNIP, SNIPER, SAN 在机器学习中有一很重要,模型预训练的分布应该尽可能接近测试输入的分布。...为了清晰起见,我们只对一个感受野中心(即中央黑色网格)密集化,并只给对角上色。 Anchor密集化策略,使不同类型的anchor在图像上具有相同的密度,显著提高小人脸的召回率。

    1.4K10

    React项目中如何实现一个简单的目录定位

    前言 目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节 如何在React中实现点定位和平滑滚动 目录自动高亮的实现思路 处理顶部导航遮挡的解决方案 服务端渲染下的实现方案...对于点定位来说,主要涉及这两个部分: 设置,为页面中的某个组件添加id属性 点击链接,跳转到指定处 例如: // 组件 function AnchorComponent() {...原生scrollIntoView方法 useScrollIntoView内部其实就是使用了原生的scrollIntoView方法,所以我们也可以直接调用: function App() { const...问题解析 遮挡问题 有时会被固定的Header遮挡,此时滚动会定位到元素上方,用户看不到对应的内容。...但是在Next.js的SSR环境下就会有问题: 点击目录链接时,页面不会滚动。 这是因为在服务端,我们无法获取组件的ref,所以元素不存在,自然无法定位。 滚动页面时,目录高亮也失效。

    1.1K20

    「目标检测算法」连连看:从 Faster R-CNN 、 R-FCN 到 FPN

    一种用于目标检测的简单粗暴的方法是将滑动窗口从左到右,从上到下滑动使用分类来识别目标。为了区分在不同视觉距离下的目标类型,我们使用了不同尺寸和高宽比的窗口。 ?...R-CNN的训练和推理过程都很缓慢。例如,我们生成了2000个的区域提议,每个区域提议分别进入CNN。换句话说,我们对不同的ROIs重复了进行了2000次的提取特征。...RPN对特征图里的每个位置(像素)做了K次猜测。因此RPN在每个位置都输出4×k个坐标和2×k个分数。...而是预测了相对于一些被称为的参考框的左上角的偏移量,比如 ?x, ?y 。因为我们约束了偏移量,所以我们的猜测仍然类似与。 ? 为了对每个位置都进行k次预测,我们需要在每个位置中心放置k个。...Faster R-CNN使用了更多的。Faster R-CNN在一个位置上使用了9个: 3种不同尺度并使用三种长宽比。

    79730

    C++ OpenCV形态学操作--腐蚀与膨胀

    有一个可定义的 , 通常定义为内核中心。 进行膨胀操作时,将内核 ? 划过图像,将内核 ? 覆盖区域的最大相素值提取,并代替位置的相素。...覆盖区域的最小相素值提取,并代替位置的相素。 以与膨胀相同的图像作为样本,我们使用腐蚀操作。从下面的结果图我们看到亮区(背景)变细,而黑色区域(字母)则变大了 ? 相关API ?...不指定位置,则默认点在内核中心位置。 先上干货 腐蚀和肿胀的Demo演示效果: ?...定义最大的和当前的 然后我们还用到了 createTrackbar这个函数.createTrackbar是Opencv中的API,其可在显示图像的窗口中快速创建一个滑动控件,用于手动调节阈值,具有非常直观的效果...然后在Main方法里面加入腐蚀的滑动条 ? 显示效果,我们滑动条SIZE调到2 ? ---- -END-

    2.4K30

    「目标检测算法」连连看:从 Faster R-CNN 、 R-FCN 到 FPN

    一种用于目标检测的简单粗暴的方法是将滑动窗口从左到右,从上到下滑动使用分类来识别目标。为了区分在不同视觉距离下的目标类型,我们使用了不同尺寸和高宽比的窗口。 ?...R-CNN的训练和推理过程都很缓慢。例如,我们生成了2000个的区域提议,每个区域提议分别进入CNN。换句话说,我们对不同的ROIs重复了进行了2000次的提取特征。...RPN对特征图里的每个位置(像素)做了K次猜测。因此RPN在每个位置都输出4×k个坐标和2×k个分数。...而是预测了相对于一些被称为的参考框的左上角的偏移量,比如 ?x, ?y 。因为我们约束了偏移量,所以我们的猜测仍然类似与。 ? 为了对每个位置都进行k次预测,我们需要在每个位置中心放置k个。...Faster R-CNN使用了更多的。Faster R-CNN在一个位置上使用了9个: 3种不同尺度并使用三种长宽比。

    65930

    电子封条监控系统 yolov5

    介绍电子封条监控系统算法模型Yolo算法之前,首先先介绍一下滑动窗口技术,这对我们理解Yolo算法是有帮助的。采用滑动窗口的目标检测算法思路非常简单,它将检测问题转化为了图像分类问题。...在电子封条监控系统算法模型YOLO系列算法中,针对不同的数据集,都需要设定特定长宽的框。...在网络训练阶段,模型在初始框的基础上输出对应的预测框,计算其与GT框之间的差距,并执行反向更新操作,从而更新整个网络的参数,因此设定初始框也是比较关键的一环。...在YOLOv3和YOLOv4检测算法中,训练不同的数据集时,都是通过单独的程序运行来获得初始框。...电子封条监控系统算法模型中将此功能嵌入到代码中,每次训练时,根据数据集的名称自适应的计算出最佳的框,用户可以根据自己的需求将功能关闭或者打开,具体的指令为parser.add_argument(‘–

    25420

    详解RPN网络

    滑动窗口的大小为n*n(这里是3×3)。...对于每个滑动窗口,生成一组特定的,但有3种不同的长宽比(1:1, 1:2, 2:1)和3种不同的长宽(128, 256和512)的方框,如下所述: 有3种不同的长宽比和3种不同的方框,所以特征图中每个像素共可有...下图显示了尺寸为(600, 900)的图像的(450, 350)位置的9个。 在上图中,三种颜色代表三种比例或尺寸(128×128, 256×256, 512×512)。...假设我们有一张大小为600×800的图像,在通过卷积神经网络(CNN)块后,这幅输入图像缩小为38×56的特征图,特征图的每个位置都有9个盒。...如果我们把特征图的深度定为18(9个x 2个标签),我们将使每个都有一个有两个值的向量(通常称为预测值),代表前景和背景。

    4.3K31

    Html标签href的困惑记载

    我坚信这一。惹出些问题并不见得都是坏事。每每因为自己的造成的这些个问题,反倒收获不少,?。 之后就去查证了下关于这Html标签的Href属性。超链接的 URL。...而对于Href第三~指向页面中的,如下用法: 需要转到地方添加,文字,注意href值是#开头+英文字母命名 需要在被转到位置添加,<span id="命名" name...但问题是,活动一屏幕足以显示完,无需滑动,Ios手机也是如此。那么使用(href=”#”)在这里是不会影响页面刷新的。...对于Ios跟js的交互是略有点不同的: ios中objective-c与js的交互这篇文章会有讲到。...故此:此处当不依靠href属性做页面跳转时候,最好还是用javascript:;更优一。 ---- Gui求指点,欢求吐槽!

    3.4K50

    Region Proposal Network (RPN) 架构详解

    Step 2 在这一步中,一个滑动窗口运行在上一步获得的特征图上。滑动窗口的大小是 n*n(这里是 3×3)。...对于每个滑动窗口,都会生成一组特定的,但具有 3 种不同的纵横比(1:1、1:2、2:1)和 3 种不同的比例(128、256 和 512),如下所示。...每个框都有两个可能的标签(前景或背景)。如果我们将特征图的深度设置为 18(9 个 x 2 个标签),我们将使每个都有一个向量,该向量具有表示前景和背景的两个值(称为 logit 的法线)。...如果我们将特征图的深度设置为 18(9 个 x 2 个标签),我们将使每个都有一个向量,该向量具有表示前景和背景的两个值(通常称为 logit)。...简而言之,RPN 预测一个是背景还是前景的可能性,并对进行细化。

    84730
    领券