css3 html5 手机设备 列表的弹回和加速移动
2014-09-06 16:17
381 查看
<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>
相关文章推荐
- html5和css3对移动设备和电脑浏览器支持列表
- 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
- 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
- 第九十四节,html5+css3移动手机端流体布局,旅游部分,媒体查询
- 移动设备浏览器HTML5兼容性列表
- 第九十二节,html5+css3移动手机端流体布局,开篇知识
- 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
- 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
- 核高基专家许洪波:HTML5将赢得移动设备未来
- 设计移动手机网站时候的自适应设备宽度
- HTML5移动客户端开发之CSS3、Javascript
- 移动设备、手机浏览器Javascript滑动事件代码
- 在移动设备上使用html5 canvas 实现报表
- HTML5 移动设备常用的HTML5表单元素 - 4
- 视频: AppCan HTML5移动游戏加速引擎版与普通版游戏对比视频
- 针对中国加速增长的移动设备市场推出全新组合芯片
- Css3在移动设备上的优化点
- 移动设备的Web应用程序开发----(验证和列表)
- VisionMobile:HTML5的根基在于移动设备