touch 反弹

最新推荐文章于 2021-05-29 06:18:46 发布
最新推荐文章于 2021-05-29 06:18:46 发布
阅读量134 收藏
点赞数

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

}

html,body{

width:100%

}

aside{

height: 100%;

width:100%;

}

.draw{

width: 60px;

height: 500px;

border: 2px solid #ccc;

overflow: hidden;

position: fixed;

left: 10px;

top: 50%;

transform: translateY(-50%);

}

ul::after{

content: "";

display: block;

visibility: hidden;

height: 0;

clear: both;

 

}

ul{

zoom:1;

}

li{

list-style: none;

float: left;

width: 60px;

height: 60px;

line-height: 60px;

text-align: center;

border: 1px solid #494444;

box-sizing: border-box;

}

</style>

</head>

<body>

<aside class="main">

<div class="draw" id="draw">

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li>列表4</li>

<li>列表5</li>

<li>列表6</li>

<li>列表7</li>

<li>列表8</li>

<li>列表9</li>

<li>列表10</li>

</ul>

</div>

</aside>

<script>

var draw = document.querySelector("#draw");

var ul = draw.children[0];

var startY = 0;

var centerY = 0;

var maxDown = 50;

var maxUp = -(ul.offsetHeight - draw.offsetHeight+maxDown)

var maxUpBounce = 0;

var maxDownBounce = -(ul.offsetHeight - draw.offsetHeight);

ul.addEventListener('touchstart',function(e){

startY = e.changedTouches[0].clientY;

})

ul.addEventListener('touchmove',function(e){

var dy = e.changedTouches[0].clientY - startY;

var tempY = centerY + dy;

if(tempY>maxDown){

tempY = maxDown;

}

if(tempY<maxUp){

tempY = maxUp;

}

ul.style.transform = 'translateY('+tempY+'px)';

})

ul.addEventListener('touchend',function(e){

var dy = e.changedTouches[0].clientY-startY;

centerY = centerY + dy;

if(centerY>maxUpBounce){

centerY=maxUpBounce;

ul.style.transition = 'transform .5s';

ul.style.transform = 'translateY('+centerY+'px)';

console.log('下拉')

}

if(centerY<maxDownBounce){

centerY=maxDownBounce;

ul.style.transition = 'transform .5s';

ul.style.transform = 'translateY('+centerY+'px)'

console.log('上拉')

}

})

</script>

</body>

</html>


 

uuulove
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js实现移动端Touch滑动反弹
lintener_zhang的博客
02-15 272
源码如下： &lt;!DOCTYPE html&gt;   &lt;html lang="zh-CN"&gt;     &lt;head&gt;       &lt;meta charset="utf-8"&gt;       &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&g
原生JS实现Touch滑动反弹
HH
03-04 279
<template> <div> <div class="box"> <ul @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend' class="scroll"> <li v-fo...
链接 touch 反弹
uuulove的博客
01-22 149
网址https://mp.weixin.qq.com/s/rJIRAvZQerobAk8xWoX9ow
原生 JS 实现移动端 Touch 滑动反弹
qq_31965515的博客
01-18 255
什么是 Touch滑动？就是类似于 PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 Touch事件结合 js去实现，效果如下： 1. 准备工作 什么是移动端的 Touch事件？在移动端 Touch事件可以细分成三种，分别是： touchstart、 touchmove和 touchend，并且 touch事件必须要用 addEventListener去监听。 touch...
移动端 Touch 滑动反弹
weixin_34159110的博客
01-29 227
转原生 js 实现移动端 Touch 滑动反弹 移动端 Touch 滑动反弹 什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下： 1. 准备工作 什么是移动端的Touch事件？在移动端Touch事件可以细分成三种，分别是：touchstart、touchmove和touchend，并且touch事件必须要用a...
原生 js 实现移动端 Touch 滑动反弹
极客神殿
05-15 532
移动端 Touch 滑动反弹 什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下： 1. 准备工作 什么是移动端的Touch事件？在移动端Touch事件可以细分成三种，分别是：touchstart、touchmove和touchend，并且touch事件必须要用addEventListener去监听。 touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend
js实战：实现移动端 Touch 滑动反弹！
cocoer_的博客
03-25 716
什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下： （需要完整代码请看文末） 移动端 Touch 滑动反弹 什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下： 效果图 准备工作 什么是移动端的Touch事件？在移动端Touch事...
android 反弹效果,Android ScrollView实现反弹效果的实例
weixin_32809369的博客
05-29 97
Android ScrollView实现反弹效果自定义ScrollView控件：/*** ScrollView反弹效果的实现*/public class BounceScrollView extends ScrollView {private View inner;// 孩子Viewprivate float y;// 点击时y坐标private Rect normal = new Rect();...
ListView反弹效果
11-02
在onScroll()方法中，我们可以获取当前滚动状态（SCROLL_STATE_IDLE, SCROLL_STATE_TOUCH_SCROLL, SCROLL_STATE_FLING）以及滚动的距离，判断是否达到顶部或底部。 2. **计算边界**：确定ListView是否已经滚动到...
完成基于 yolov3 与 TensorRT 的 快速目标检测与基于 sgm 与 cuda 的 双目立体重建
09-05
，发送类别，概率，以及物体在相机坐标系下的xyz.zip目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
伪装目标检测评价指标代码及数据集下载链接.zip
09-05
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
基于OpenCV的合成活性粒子跟踪器
09-05
基于OpenCV的合成活性粒子跟踪器。
Tensorflow2.0下运行目标检测网络Centernet（基于see--的keras-centernet）.zip
09-05
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
libqt5sql5-psql-5.11.3+dfsg1-1+deb10u5-arm64.deb
最新发布
09-05
libqt5sql5-psql-5.11.3+dfsg1-1+deb10u5-arm64.deb
Axelrod-1.17.1-py2.py3-none-any.whl.zip
09-05
Axelrod-1.17.1-py2.py3-none-any.whl.zip
Axelrod-3.6.0-py2.py3-none-any.whl.zip
09-05
Axelrod-3.6.0-py2.py3-none-any.whl.zip
Axelrod-3.1.2-py2.py3-none-any.whl.zip
09-05
Axelrod-3.1.2-py2.py3-none-any.whl.zip
iPod Touch 电路原理详解
"iPod Touch 原理图包含详尽的电路设计，适合对iPod Touch内部构造感兴趣的人员深入学习。" 苹果公司的iPod Touch是一款非常受欢迎的多媒体播放器，其内部构造涉及到复杂的电子工程原理。该原理图揭示了设备内部的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值