js实现滚动文本显示

A，需求背景：对于一个实时更新信息的网站来说，通常需要有一个模块动态的显示动态信息，通常会使用异步更新。由于模块空间大小有限而展示的信息比较多，这时我们可以采用类滚动新闻的方式展示动态信息。下面将使用js实现类似这样的功能。

B，实现

下面是javascript部分，需要导入相应的jQuery包：

function dynamicnews()

{

//下面通过异步Ajax获取服务器数据，假设下面为获取的动态展示信息数组

var dnewsarr =['news1','news2','news3','news4','news5','news6','news7','news8','news9'

//初始化开始要展示的信息的位置状态

initnews(dnewsarr);

}

var   length;//数组长度

var interval;//定时器

function initnews(array)

{

var divs = [];

var margin;//两条新闻之间的间距

length = array.length;

//下面为每条新闻动态生成一个div并插入到父节点 $("#dnews").下面

for(var i = 0; i < length; ++i)

{

margin = 2;

$("#dnews").children("div:last-child").append(divs[i]);//按顺序插入节点

}

$("#dnews").css('margin-top', 236+'px');//设置初始节点 $("#dnews")的位置

interval = setInterval(scrollnews,120);//开始不断的执行 scrollnews()，动态改变 $("#dnews")位置

}

function scrollnews()

{

var currentmargin =$("#dnews").css("margin-top");//获取当前位置

var marginvalue = currentmargin.substring(0,currentmargin.indexOf('px'));

if(marginvalue<=0 && length <= 8)

clearscroll();

if(marginvalue < -249)

marginvalue = 236;//回归初始状态

else

marginvalue -= 2;//每一次移动2px

currentmargin = marginvalue + 'px';

$("#dnews").css('margin-top', currentmargin);

}

//鼠标放在模块上面时停止滚动

function clearscroll()

{

clearInterval(interval);

}

//鼠标移出时继续滚动

function continuescroll()

{

interval = setInterval(scrollnews,120);

}

以上是js代码，下面是对应的html代码：

C，实现效果：

http://toshimin.com/17translate/fanyi