css3 html5 手机设备 列表的弹回和加速移动
浏览数：26 /
时间：2015年06月11日
<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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
