正文
jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-2.1.4.min.js"></script>
<style> #scrollDiv
{
width: 100%;
margin:100px auto;
height: 300px;
line-height: 25px;
border: #ccc 1px solid; overflow: hidden;
} #mytable{
width: 80%;
/*height: 300px;*/
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
#mytable tbody tr{
height: 25px;
}
#scrollDiv li
{
height: 25px;
padding-left: 10px;
}
</style>
</head>
<body> <div id="scrollDiv">
<table width="100%" id="mytable" style="margin: 0px;">
<tbody id="mytbody">
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-07-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-08-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-09-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-10-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-11-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-12-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-13-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-14-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-15-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-16-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-17-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-18-17</td>
<td align="center">
办理中
</td>
</tr>
<tr>
<td align="center">17071700002</td>
<td align="center">危险化学品经营许可</td>
<td align="center">安监局</td>
<td align="center">2017-19-17</td>
<td align="center">
办理中
</td>
</tr>
</tbody>
</table> </div><script>
function clock(){
$("#mytable").animate({marginTop:"-25px"},500,function(){
$(this).css({marginTop:"0px"}).find("tr:first").appendTo(this);
})
}
$(function(){
var myvar=setInterval("clock()",1000);
$("#scrollDiv").hover(function(){
console.log("aaa");
clearInterval(myvar);
},function(){
myvar = setInterval("clock()",1000);
})
})
</script>
</body>
</html>
