標籤：style blog io java ar art div cti sp
<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 手機裝置 列表的彈回和加速移動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
