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 使用结构标签 在制作网页时,不仅需要使用< ...
随机推荐
- favicon.ico请求处理
favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404. 出于优化的考虑,要么就有这个图标,要么就禁止产 ...
- Spring-Security (补充)
一.配置静态资源过滤 直接在xml中配置即可 <!-- 配置静态资源过滤 --> <security:http security="none" pattern=& ...
- sql基础学习
学习参考网站:http://www.runoob.com/sql/sql-tutorial.html 一.SQL命令 1.SELECT 语句 用于从数据库中选取数据. select column_na ...
- CentOS7 相关配置
nginx 1.在线安装nginx yum install nginx 2.启动nginx服务 systemctl start nginx 3.防火墙设置 打开http防火墙:firewall-cmd ...
- 20140315 模板类pair的用法 2、visual 2010调整代码格式是ctrl+k+
1.模板类pair的用法 包含头文件#include<utility> http://blog.csdn.net/laixingjun/article/details/9005200 ...
- 【POJ】1182 食物链
这是<挑战设计程序竞赛>中的例题. 题目链接:http://poj.org/problem?id=1182 题意:中文题面.不赘述. 题解: 代码: //带权并查集 #include< ...
- Spark中的各种action算子操作（java版）
在我看来,Spark编程中的action算子的作用就像一个触发器,用来触发之前的transformation算子.transformation操作具有懒加载的特性,你定义完操作之后并不会立即加载,只有 ...
- iOS开发系列-修改项目工程名
当前有项目工程名为iOS,需要修改工程名为IFLY.在修改前注意备份项目 修改项目名 出现弹框,点击Rename 修改工程目录文件名 注意Tests与UITests不要删除 选中IFLY.xcodep ...
- SQL语句：一张表和另一张表的多重匹配查询
1.两个表结构如下图 2.如何查询成如下图所示 3.SQL语句是: select id,name=stuff(( select ','+t2.name from a t1 join b t2 on c ...
- RabbitMQ学习第二记：工作队列的两种分发方式，轮询分发（Round-robin）和 公平分发（Fair dispatch）
1.什么是RabbitMQ工作队列 我们在应用程序使用消息系统时,一般情况下生产者往队列里插入数据时速度是比较快的,但是消费者消费数据往往涉及到一些业务逻辑处理导致速度跟不上生产者生产数据.因此如果一 ...