文字的自动滚动播放
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2.12节,文本框中的文本自动滚动的效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>文本框中的文字自动滚动效果</h2>
<div id='rollContent' data-rwidth='100' data-rhight='100' class='rollContent'>
111111111111
222222222222
333333333333
333333333333
333333333333
333333333333
</div>
<script type="text/javascript">
window.onload = function(){
var rollContent = document.getElementById("rollContent"),//获取元素
_div = rollContent.innerHTML,
setCss = function(_this, cssOption){//设置样式
if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
return;
}
for(var cs in cssOption){
_this.style[cs] = cssOption[cs];
}
return _this;
};
rollContent.innerHTML = "<div id='rollContent_roll'>"+_div+"</div>";
setCss(rollContent, {//初始化样式
"position":"relative",
"overflow":"hidden",
"wordWrap":"break-word",
"wordBreak":"break-all",
"width":rollContent.getAttribute("data-rwidth"),
"height":rollContent.getAttribute("data-rhight")
});
var timeRoll = document.getElementById("rollContent_roll"),
_h = timeRoll.offsetHeight;
timeoutRoll = function(){//修改top值
var _h = timeRoll.offsetHeight,
_t = parseInt(timeRoll.style.top, 10),
_tt = _h > Math.abs(_t) || _t >= 0 ? _t-10: (_h || 0);//是否将top设置为0
setCss(timeRoll, {
"top":_tt+"px"
});
setTimeout(timeoutRoll,200);//间时调用，模拟动画
};
if(_h > rollContent.getAttribute("data-rhight")){
timeoutRoll();
setCss( timeRoll, {
"position":"relative",
"top":"0px"
});
}
};
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通