有时候需要展示的文字较多, 但是空间较少, 为了能充分的利用空间, 可以将文字做成自动滚动的方式. 例如网页里的新闻. 这里用 JavaScript 完成这个功能.
用 JavaScript 制作滚动文字的方法如下:
实现代码:
html 部分:
- <div id="roll" class="roll">
- 11111111111111111111111
- 222222222222222222222222
- 33333333333333333333333
- 44444444444444444444444
- 55555555555555555555555
- </div>
JavaScript 部分:
代码的主要思路:
1, 首先写一个函数动态的设置节点的 style
2, 每过一段特定的时间, 文字的 top 值减少指定的值
3, 如果是最后一项, 则恢复为最开始的状态.
具体代码如下:
- var roll=document.getElementById("roll");
- var div=roll.innerHTML;
- setCSS=function (_this,CSS) {
- if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
- return;
- }
- for(var i in CSS){
- _this.style[i]=CSS[i];
- }
- return _this;
- }
- roll.innerHTML="<div id='rr'>"+div+"</div>";
- setcss(roll,{
- "position":"relative",
- "overflow":"hidden",
- "width":"100px",
- "height":"100px",
- "color":"red",
- })
- var timeroll=document.getElementById("rr");
- var h=timeroll.offsetHeight;
- Timeroll=function () {
- var h=timeroll.offsetHeight;
- var t=parseInt(timeroll.style.top,10);
- var tt=h>Math.abs(t)||t>=0?t-10:(h||0);
- setcss(timeroll,{
- "top":tt+"px"
- })
- setTimeout(Timeroll,200);
- }
- if(h>100){
- Timeroll();
- setcss(timeroll,{
- "position":"relative",
- "top":"0px",
- })
- }
来源: http://www.css88.com/qa/javascript/10951.html