1. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向上滚动</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
color: 12px;
}
.wrap {
margin: 200px;
width: 500px;
height: 30px;
overflow: hidden;
line-height: 30px;
border: 1px solid red;
}
.wrap li {
padding-left: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/upLine.js"></script>
</body>
</html>
View Code
2. upLine.js
(function ($) {
$.fn.extend({
upLine: function (ops) {
var opsDefault = {
line: 1,
speed: 1000,
timer: 3000
};
var ops = $.extend({}, opsDefault, ops);
var timer;
var wrap = this.eq(0).find("ul:first");
var lineH = wrap.find("li:first").height();
var upHeight =-ops.line * lineH;
scrollUp = function () {
wrap.animate({
marginTop: upHeight
}, ops.speed, function () {
for (i = 1; i <= ops.line; i++) {
wrap.find("li:first").appendTo(wrap);
}
wrap.css({
marginTop: 0
});
});
};
var run = function () {
timer = setInterval(scrollUp, ops.timer);
};
wrap.hover(function () {
clearInterval(timer);
}, function () {
run();
});
run();
}
});
})(jQuery);
$(".wrap").upLine({
line: 1,
speed: 1000,
timer: 2000
});
View Code
3. 知识点
var ops = $.extend({}, opsDefault, ops); var lineH = wrap.find("li:first").height(); wrap.animate({ marginTop: upHeight } upHeight 负值 wrap.find("li:first").appendTo(wrap); wrap.hover(function () { inFn() }, function () { outFn(); }); for (i = 1; i <= ops.line; i++) { wrap.find("li:first").appendTo(wrap); } 支持多行