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>
jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...的更多相关文章
- JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
- javascript实现图片切换、自动走、鼠标移入会停止,移出继续走
要实现以上效果并不难,把功能分开一步一步来实现就变得简单了,录制动态图不流畅,看代码意会吧! <!doctype html> <html lang="en"> ...
- JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery实现文字向上逐条滚动
直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- marquee 标签的鼠标放上去滚动效果 鼠标离开继续滚动
效果很实用,可以轻松的实现鼠标放上去停止滚动.鼠标离开继续滚动的效果.下面是具体的用法(特别注意onMouseOver和onMouseOut是需要同时写进去才会出现比较好的效果):onMouseOut ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- jQuery实现的文字逐行向上间歇滚动效果示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js鼠标经过文字滚动,移开还原
不说别的,直接贴代码. <div class="kj-scroll" id="countrylist0" onmouseover="wPAa = ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
随机推荐
- 使用SAX方式解析XML文件
package com.pingyijinren.test; import android.util.Log; import org.xml.sax.Attributes; import org.xm ...
- [bzoj2946][Poi2000]公共串_后缀数组_二分
公共串 bzoj-2946 Poi-2000 题目大意:给定$n$个字符串,求他们的最长公共子串. 注释:$1\le n\le 5$,$1\le minlen<maxlen\le 2000$. ...
- 深入理解hadoop(一)
hadoop 前世今生 hadoop最早起源于开源收缩引擎nutch,由dong cutting 贡献,但由于nutch最初的设计不能解决数10亿级别的文件存储和索引而遇到了严重的可扩展性问题,直到 ...
- POJ 3342 Party at Hali-Bula (树形dp 树的最大独立集 判多解 好题)
Party at Hali-Bula Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5660 Accepted: 202 ...
- python内置全局变量
vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...
- 使用bbed改动数据
bbed是一个强大的工具,同意我们绕过oracle直接从数据文件里改动相应的内容 ZBDBA@orcl11g>select * from emp; EMPNO ENAME JOB MGR HIR ...
- HDU 1269 迷宫城堡 最大强连通图题解
寻找一个迷宫是否是仅仅有一个最大强连通图. 使用Tarjan算法去求解,经典算法.必需要学习好,要自己创造出来是十分困难的了. 參考资料:https://www.byvoid.com/blog/scc ...
- Codeforces Beta Round #2 B. The least round way
这个2B题还好~~ 题目大意: 给出一个矩阵.从左上走到右下,仅仅能往右或下走.路径中每一个格子有一个数.这些数相乘得出一个数. 求这个数末尾零最少的一条路径. 解题思路: 找出一条路径.乘积得数中素 ...
- .NET中的PublicKeyToken以及强命名问题
在.NET的GAC出现之前,以前有DLL Hell的问题.这是由于当时对于共享的DLL的处理方式.是通过採用注冊表的方式实现的.当我们安装一个程序A的时候,这个程序包括一个共享的DLL,那么这个DLL ...
- iOS 保存视频AVAssetWriter
错误的CMTime导致保存的视频无效,比如: frameTime CMTime 1122 600ths of a second value CMTimeValue 1122timescale CMTi ...