首页 > 代码库 > css3 html5 手机设备 列表的弹回和加速移动
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 手机设备 列表的弹回和加速移动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。