文本内容滚动
我们有可能会在一个有限的文本区域中写入很多的文字,由于文本区域有限通常都会产生滚动条,让我们自己拉动。这很不美观同时也有点烦人,所以我们可以制作一个自动滚动的文本区域,让你的页面更高端更美观
看看成品先:
上代码:
javascript代码片段
window.onload = () => {
//获取元素
var roll = document.getElementById("rollCon"),
div = roll.innerHTML,
//设置样式
setCss = (_this, cssOption) => {
//检测节点类型
if(!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style)
return
for(var css in cssOption) {
_this.style[css] = cssOption[css]
}
return _this
}
roll.innerHTML = "<div id='rollCon_roll'>" + div + "</div>"
//初始化样式
setCss(rollCon, {
"position" : "relative", //设置相对位置
"overflow" : "hidden" //当内容超出文本框时隐藏
})
var timeRoll = document.getElementById("rollCon_roll"),
//修改top值
timeoutRoll = () => {
var height = timeRoll.offsetHeight,
top = parseInt(timeRoll.style.top, 10),
tt = height > Math.abs(top) || top >= 0 ? top - 10 : (height || 0)
//修改样式
setCss(timeRoll, {
"top" : tt + "px"
})
//定时调用
setTimeout(timeoutRoll, 200)
}
timeoutRoll()
//设置先对位置
setCss(timeRoll, {
"position" : "relative",
"top" : "0px"
})
}
先获取div元素,再通过javascript对该元素的css样式进行调整,在设置定时调用修改该元素的css样式,使他呈现出自动滚动的效果
html代码片段
<h2>用javascript实现文本自动滚动</h2>
<div id="rollCon" class="rollCon">
<ul>
<li>我我我我我我我我我我我</li>
<li>是是是是是是是是是是是</li>
<li>文文文文文文文文文文文</li>
<li>本本本本本本本本本本本</li>
<li>,,,,,,,,,,,</li>
<li>我我我我我我我我我我我</li>
<li>可可可可可可可可可可可</li>
<li>以以以以以以以以以以以</li>
<li>滚滚滚滚滚滚滚滚滚滚滚</li>
<li>动动动动动动动动动动动</li>
</ul>
</div>