您的位置：首页 > Web前端 > JavaScript

JavaScript字幕滚动效果

2010-05-02 13:39 295 查看
其中要注意的：overflow:hidden，否则会全部显示，达不到效果。

使用时可以对ul.scrollTop >= 195这一句的数字进行设置。达到平滑过渡的作用。

<!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>

</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="scroll" style="overflow:hidden;height:100px;width:200px">
<li>滚动效果一</li>
<li>滚动效果二</li>
<li>滚动效果三</li>
<li>滚动效果四</li>
<li>滚动效果五</li>
<li>滚动效果六</li>
<li>滚动效果七</li>
<li>滚动效果八</li>
<li>滚动效果九</li>
<li>滚动效果十</li>
<li>滚动效果一</li>
<li>滚动效果二</li>
<li>滚动效果三</li>
<li>滚动效果四</li>
<li>滚动效果五</li>
<li>滚动效果六</li>
<li>滚动效果七</li>
<li>滚动效果八</li>
<li>滚动效果九</li>
<li>滚动效果十</li>
</ul>
<mce:script type="text/javascript"><!--
var ul = document.getElementById("scroll");
function charlist(){
ul.scrollTop++;
if (ul.scrollTop >= 195)
{
ul.scrollTop = 0;
}
}
var intval = setInterval(charlist,60);
ul.onmousemove = function(){
clearInterval(intval);
}
ul.onmouseout = function(){
intval = setInterval(charlist,60);
}

// --></mce:script>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航