(function ($) {
$.fn.lSlide = function (options) {
initLSlide(this, options);
};
function initLSlide(item,options) {
var defaults = {
nTop:-0.71
};
var opts = $.extend({},defaults,options);
var _self = $(item);
var timeId = -1;
timeId = setInterval(function () {
_self.animate({top:opts.nTop + "px"},function () {
var item = _self.children('li')[0];
var fChild = $(item).prop('outerHTML');
_self.append(fChild);
$(item).remove();
});
_self.animate({top:0+ "px"},0);
},1000)
_self.on('touchstart',function () {
clearInterval(timeId);
})
}
})(jQuery)
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
overflow: auto;
}
li{
height: 20px;
}
</style>
<body>
<div>
<ul id="ulContent">
<li>我是第1行文字</li>
<li>我是第2行文字</li>
<li>我是第3行文字</li>
<li>我是第4行文字</li>
<li>我是第5行文字</li>
<li>我是第6行文字</li>
<li>我是第7行文字</li>
<li>我是第8行文字</li>
<li>我是第9行文字</li>
<li>我是第10行文字</li>
<li>我是第11行文字</li>
<li>我是第12行文字</li>
<li>我是第13行文字</li>
<li>我是第14行文字</li>
<li>我是第15行文字</li>
<li>我是第16行文字</li>
<li>我是第17行文字</li>
<li>我是第18行文字</li>
<li>我是第19行文字</li>
<li>我是第20行文字</li>
</ul>
</div>
<script src="jquery.min.js"></script>
<script src="l-slide.js"></script>
<script>
$(function(){
<!--获取li每行的高度,动画移动的高度-->
var liHeight = $('li').height();
<!--调用插件-->
$('#ulContent').lSlide({nTop:liHeight});
})
</script>
</body>