<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery文字逐行向上滚动代码</title>
<script src="http://style.c.aliimg.com/fdevlib/js/gallery/jquery/jquery-latest.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
font-family: '微软雅黑';
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
li {
list-style: none
}
img {
border: none
}
a {
text-decoration: none;
}
/* -------------------------摇奖排行榜----------------------------------- */
.record_Top {
90%;
height: 50px;
text-align: center;
line-height: 50px;
margin: 30px auto 0px;
color: #000;
}
.topRec_List dl,
.maquee {
90%;
overflow: hidden;
margin: 0 auto;
color: #7C7C7C
}
.topRec_List dd {
float: left;
text-align: center;
border-bottom: 1px solid #1B96EE;
color: #1B96EE;
}
.topRec_List dl dd:nth-child(1) {
17%;
height: 40px;
line-height: 40px;
}
.topRec_List dl dd:nth-child(2) {
18%;
height: 40px;
line-height: 40px;
}
.topRec_List dl dd:nth-child(3) {
25%;
height: 40px;
line-height: 40px;
}
.topRec_List dl dd:nth-child(4) {
40%;
height: 40px;
line-height: 40px;
}
.maquee {
height: 195px;
}
.topRec_List ul {
100%;
height: 195px;
}
.topRec_List li {
100%;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 12px;
border-bottom: 1px dashed #aaa;
}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div {
float: left;
}
.topRec_List li div:nth-child(1) {
17%;
}
.topRec_List li div:nth-child(2) {
18%;
}
.topRec_List li div:nth-child(3) {
25%;
}
.topRec_List li div:nth-child(4) {
40%;
}
.apple a {
display: block;
text-decoration: none;
}
.apple,
.aa {
90%;
height: 50px;
overflow: hidden;
margin: 30px auto;
border: 1px solid #1B96EE;
}
.apple a,
.aa a {
100%;
height: 50px;
line-height: 50px;
text-indent: 20px;
color: #1B96EE;
}
.aa {
word-wrap: break-word;
line-height: 50px;
color: #1B96EE;
}
.maquee li:nth-child(2n+2) {
background: #000000;
}
</style>
</head>
<body>
<div class="Top_Record">
<div class="record_Top">摇奖排行榜</div>
<div class="topRec_List">
<dl>
<dd>编号</dd>
<dd>姓名</dd>
<dd>奖项</dd>
<dd>时间</dd>
</dl>
<div class="maquee">
<ul>
<li>
<div>1</div>
<div>王11</div>
<div>中了31元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>2</div>
<div>王222</div>
<div>中了32元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>3</div>
<div>王33</div>
<div>中了33元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>4</div>
<div>王444</div>
<div>中了34元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>5</div>
<div>王55</div>
<div>中了35元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>6</div>
<div>王66</div>
<div>中了36元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>7</div>
<div>王77</div>
<div>中了37元</div>
<div>2014/12/30 14:20</div>
</li>
<li>
<div>8</div>
<div>王88</div>
<div>中了38元</div>
<div>2014/12/30 14:20</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
(function($) {
function slide(obj) {
this.el = obj.el || '';
this.num = obj.num || '';
this.hover = obj.hover || '';
this.stoptime = obj.stoptime || '';
this.silderTime = obj.silderTime || '';
this.slideDistance = obj.slideDistance || 0;
this.init();
var self = this;
$(this.el).hover(function(){
self.hoverw();
},function(){
self.animation();
})
}
var length=0;
var setiner;
slide.prototype = {
init: function() {
for(var i=0;i<this.num;i++){
$(this.el).find("ul").append($(this.el).find("ul li").clone().slice(0,this.num)[i])
}
this.animation();
},
animation: function() {
var self = this;
setiner=setInterval(function(){
var curmarTop = Number($(self.el).find("ul").css("margin-top").replace("px", '')) || 0;
length++;
$(self.el).find("ul").animate({
marginTop: (curmarTop - self.slideDistance) + 'px'
}, self.silderTime, function() {
if(length == $(self.el).find("ul li").length - self.num) {
$(self.el).find("ul").css("margin-top", '0');
length = 0;
}
})
},this.stoptime)
},
hoverw: function(){
if(this.hover){
clearInterval(setiner);
}
}
}
window.slide = slide;
})(jQuery)
</script>
<script type="text/javascript">
new slide({
el: '.maquee',
num: 4, //一排展示几个
hover: true, //悬浮是否停止，
stoptime: 3000, //滚动间隔时间
silderTime: 1000, //动画时间
slideDistance: 39 //滚动距离
});
</script>
</body>
</html>