HTML
<table class="table partentTable">
<thead>
<tr>
<th>始发地</th>
<th>目的地</th>
<th>公司名称</th>
<th>会员类型</th>
<th>重货价格</th>
<th>轻货价格</th>
<th>时效</th>
<th>发货</th>
</tr>
</thead>
</table>
<table class="table myscroll1 myscroll">
<thead>
<tr>
<th>始发地</th>
<th>目的地</th>
<th>公司名称</th>
<th>会员类型</th>
<th>重货价格</th>
<th>轻货价格</th>
<th>时效</th>
<th>发货</th>
</tr>
</thead>
<tbody class="message_list1">
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a href="" class="btn btn-primary">发货</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a href="" class="btn btn-primary">发货</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a class="btn btn-default active" disabled="disabled">已抢</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a href="" class="btn btn-primary">发货</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a href="" class="btn btn-primary">发货</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a href="" class="btn btn-primary">发货</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a class="btn btn-default active" disabled="disabled">已抢</a></td>
</tr>
<tr>
<td>浙江 杭州</td>
<td>山东</td>
<td>济南山东湘达货运有限公司</td>
<td>vip会员</td>
<td>300元/吨</td>
<td>100元/吨</td>
<td>不详</td>
<td><a href="" class="btn btn-primary">发货</a></td>
</tr>
</tbody>
</table>
JS
//第一个参数表头class，第二个参数tbody的class，第三个参数可以设置不同的表单来进行滚动
topscroll("myscroll1", "message_list1", "list1");
topscroll("myscroll2", "message_list2", "list2");
topscroll("myscroll3", "message_list3", "list3");
topscroll("myscroll4", "message_list4", "list4");
function topscroll(partent, child, mymarquee) {
//遍历表头给表头一个和td一样的宽度
$(".partentTable").find('th').each(function (i) {
$(this).css('width', $('.' + partent).find('td:eq(' + i + ')').width());
});
function Marquee() {
var lists = $("." + child + " tr");
//判断向上滑动的marginTop是否等于td的高度
if (Math.abs(parseInt($("." + partent).css("margin-top"))) == $(".message_list1 tr").height()) {
//将第一个tr复制下来添加到最后
lists.eq(0).clone().appendTo("." + child);
//删除第一个tr
lists.eq(0).remove();
//将marginTop的值重置为0
$("." + partent).css("marginTop", "0px");
} else {
//margin每次减1个像素
$("." + partent).css({ "marginTop": "-=1px" });
}
}
//设置一个循环执行，并且将其赋给一个变量
mymarquee = setInterval(function () {
Marquee();
}, 100);
//当鼠标移到表格区域事件
$("." + child).hover(function () {
clearInterval(mymarquee);
}, function () {
//移除时一定要清除循环
clearInterval(mymarquee);
//将新的循环赋给变量
mymarquee=setInterval(Marquee, 100);
});
}
