js jquery实现文字自动…

最新推荐文章于 2024-12-26 19:38:37 发布

转载最新推荐文章于 2024-12-26 19:38:37 发布 · 354 阅读

javascript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的文字自动向上滚动效果，并在鼠标悬停时暂停滚动，在鼠标移开后继续滚动的功能。通过设置定时器和鼠标事件实现滚动的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：js jquery实现文字自动向上滚动，鼠标放上去停止，移开继续滚动代码。 作者：夜神

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
#scrollDiv li
{
height: 25px;
padding-left: 10px;
}
</style>

<script type="text/javascript">
function clock(){
$("#scrollDiv ul").animate({marginTop:"-25px"},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
})
}
$(function(){
var myvar=setInterval("clock()",2000);
$("#scrollDiv").hover(function(){
clearInterval(myvar);
},function(){
setInterval("clock()",2000);
})
})

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<form id="form1" runat="server">
<div id="scrollDiv">
<ul>
<li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
<li><a href="http://www.163.com">欢迎浏览网易</a></li>
<li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
<li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
<li><a href="http://www.msdn.com">msdn</a></li>
<li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
</ul>
</div>
</form>
</body>
</html>