css3 html5 手机设备 列表的弹回和加速移动
<style type="text/css">
* {
margin: 0;
padding: 0;
} .min {
width: 350px;
height: 400px;
overflow: hidden;
} .min ul {
list-style: none;
display: block;
} .min ul li {
height: 30px;
}
</style>
<body>
<div class="min">
<ul>
<li>21212125</li>
<li>12</li>
<li>343</li>
<li>5345</li>
<li>53</li>
<li>435</li>
<li>ert</li>
<li>345</li>
<li>eg</li>
<li>grrrrrr</li>
<li>3453</li>
<li>ret</li>
<li>345</li>
<li>21212125</li>
<li>456</li>
<li>56</li>
<li>rt</li>
<li>67</li>
<li>768</li>
<li>789</li>
<li>dfg</li>
<li>789</li>
<li>21212gggggg125</li>
<li>21212125</li>
<li>789</li>
<li>eeqqqqqqqq</li>
<li>789</li>
<li>gf</li>
<li>ttgg</li>
<li>sdf</li>
<li>789</li>
<li>21212125</li>
<li>dgdgdgd</li>
<li>90</li>
<li>21212125</li>
<li>-90</li>
<li>21212125</li>
<li>21212125</li>
<li>2121902125</li>
<li>90-</li>
<li>21212125</li>
<li>end</li>
<li>gf</li>
<li>ttgg</li>
<li>sdf</li>
<li>789</li>
<li>21212125</li>
<li>dgdgdgd</li>
<li>90</li>
<li>21212125</li>
<li>-90</li>
<li>21212125</li>
<li>21212125</li>
<li>2121902125</li>
<li>90-</li>
<li>21212125</li>
<li>end</li>
<li>gf</li>
<li>ttgg</li>
<li>sdf</li>
<li>789</li>
<li>21212125</li>
<li>dgdgdgd</li>
<li>90</li>
<li>21212125</li>
<li>-90</li>
<li>21212125</li>
<li>21212125</li>
<li>2121902125</li>
<li>90-</li>
<li>21212125</li>
<li>end</li>
<li>gf</li>
<li>ttgg</li>
<li>sdf</li>
<li>789</li>
<li>21212125</li>
<li>dgdgdgd</li>
<li>90</li>
<li>21212125</li>
<li>-90</li>
<li>21212125</li>
<li>21212125</li>
<li>2121902125</li>
<li>90-</li>
<li>21212125</li>
<li>end</li>
<li>gf</li>
<li>ttgg</li>
<li>sdf</li>
<li>789</li>
<li>21212125</li>
<li>dgdgdgd</li>
<li>90</li>
<li>21212125</li>
<li>-90</li>
<li>21212125</li>
<li>21212125</li>
<li>2121902125</li>
<li>90-</li>
<li>21212125</li>
<li>end</li>
<li>gf</li>
<li>ttgg</li>
<li>sdf</li>
<li>789</li>
<li>21212125</li>
<li>dgdgdgd</li>
<li>90</li>
<li>21212125</li>
<li>-90</li>
<li>21212125</li>
<li>21212125</li>
<li>2121902125</li>
<li>90-</li>
<li>21212125</li>
<li>end9999999999999</li>
</ul>
</div>
</body>
<script>
$.fn.touchEvn = function () { return this.each(function () {
var $this = $(this);
var $touchtarge = $this.children('ul');
var _ = this;
_.startY = 0;
//最高
_.maxHeight = $touchtarge[0].scrollHeight - $this.height();
_.StartSpanTime = undefined;
_.LastTop = 0;
$touchtarge.on('touchstart', function (e) {
_.startY = event.targetTouches[0].pageY;
_.StartSpanTime = event.timeStamp; }).on('touchmove', function (e) {
$(this).css({ 'transition': 'none' });
//移动的长度
var len = _.startY - event.targetTouches[0].pageY;
//最终的长度
len = (_.LastTop + len) * -1;
$(this).css('marginTop', len); }).on('touchend', function (e) {
//最终停留的位置
_.LastTop = _.LastTop + (_.startY - event.changedTouches[0].pageY);
$(this).css({ 'transition': 'margin 1s', 'transition-timing-function': 'cubic-bezier(0.1,0.3,0.5,1)' });
if (_.LastTop < 0) {
_.LastTop = 0;
$(this).css('marginTop', _.LastTop);
} else if (_.LastTop > _.maxHeight) {
_.LastTop = _.maxHeight;
$(this).css('marginTop', _.LastTop * -1);
}
else {
//减速行驶
var endLen = _.checkSpeen(event.timeStamp - _.StartSpanTime, _.startY - event.changedTouches[0].pageY);
_.LastTop = _.LastTop + endLen;
$(this).css('marginTop', _.LastTop * -1);
}
}).on('transitionend',function(){
if (_.LastTop < 0) {
_.LastTop = 0;
$(this).css('marginTop', _.LastTop);
} else if (_.LastTop > _.maxHeight) {
_.LastTop = _.maxHeight;
$(this).css('marginTop', _.LastTop * -1);
}
});
//计算减速行驶距离
_.checkSpeen = function (t, s, maxlen) {
var v = s / t;
//惯性距离
var len = 800 * v / 11;
if (len > maxlen) {
return maxlen;
}
else {
return len;
}
}
});
}
$('.min').touchEvn();
</script>
css3 html5 手机设备 列表的弹回和加速移动的更多相关文章
- HTML5手机APP开发入(5)
HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...
- HTML5手机APP开发入门(2)
HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...
- HTML5手机APP开发入门(1)
HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...
- Android 手机卫士11--窗体弹出PopupWindow
protected void showPopupWindow(View view) { View popupView = View.inflate(this, R.layout.popupwindow ...
- Android获取手机设备识别码（IMEI）和手机号码
最近看了下获取手机设备ID和手机信息以及SIM的信息例子,主要还是借鉴别人的,现在自己写一下,算是巩固加深了,也希望能给大家一个参考 必要的条件还是一部真机,SIM卡或者UIM卡. 首先,在Andro ...
- 50个最受网友欢迎的HTML5资源下载列表
完整附件下载地址:http://down.51cto.com/data/413867 附件预览: HTML 5游戏源码精选(共含9个游戏源码) http://down.51cto.com/zt/227 ...
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 关于Android的Build类——获取Android手机设备各种信息
经常遇到要获取Android手机设备的相关信息,来进行业务的开发,比如经常会遇到要获取CPU的类型来进行so库的动态的下载.而这些都是在Android的Build类里面.相关信息如下: private ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...
随机推荐
- centos7构建kylo-0.10.1
构建服务器使用centos7,8G内存.建议使用8G内存,因为内存不够失败了好几次. 系统需要提前安装一下组件: yum install -y gcc bzip2 rpm-build rpmdev ...
- phpstorm激活 破解 方法
1.license server 在线激活方式 不是很推荐,自己有服务器的话可以考虑搭建 所以就不说了. 不过我在网上找了一些地址,可以用一下,不保证长期有效 http://idea.goxz.gq ...
- 手机网站Meta的使用
meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...
- solr 查询同一个core 的关联字段
实现一个core里面多个字段的关联查询: 应用场景是: 词, 句子,文章 希望通过查询实现词,句子,文章里面共同有的关键字 private static CloudSolrServer cloudSo ...
- mycat-zookeepr--mycatweb
##############################mycat镜像############################## 5-1 创mycat镜像 wget http://dl.myca ...
- neo4j 基本概念和Cypher语句总结
下面是一个介绍基本概念的例子,参考链接Graph database concepts: (1) Nodes(节点) 图谱的基本单位主要是节点和关系,他们都可以包含属性,一个节点就是一行数据,一个关系也 ...
- websokect的原理
WebSocket 机制 以下简要介绍一下WebSocket的原理及运行机制. WebSocket是HTML5下一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通 ...
- Blahut-Arimoto algorithm Matlab源码
For a discrete memoryless channel , the capacity is defined as where and denote the input and outp ...
- ECharts （mark）
首页 文档 下载 实例 社区 工具 关于 2.0 EN ECharts 特性 特性 丰富的可视化类型 多种数据格式无需转换直接使用 千万数据的前端展现 移动端优化 多渲染方案,跨平台使用! 深度的交互 ...
- COGS2355 【HZOI2015】 有标号的DAG计数 II
题面 题目描述 给定一正整数n,对n个点有标号的有向无环图(可以不连通)进行计数,输出答案mod 998244353的结果 输入格式 一个正整数n 输出格式 一个数,表示答案 样例输入 3 样例输出 ...