js实现文本滚动效果

首先，看一下粗略的渲染，因为它是动态的，无法在页面上显示。

具体实现代码如下：

1.第一个是css代码：

style type='text/css'body，ul，li，a，p，div { padding:0pxmargin:0pxfont-size :14 px；}ul，Li { list-style : none；} a { text-decoration : none；color: # 333} # demo { overflow:hidden/*溢出部分不显示*/width :290 px；高度：228 px；/*务必精确，避免demo1和demo2之间的距离过大*/padd :5 px；margin:50px汽车；} # express Li { list-style : none；font-size :14 px；height:25pxmargin:0px 5px线高：180%；/*行间距*/字母间距：2 px；/*单词之间的距离*/border-bottom:1px虚线# CCCcursor:pointer指针；}/style2。内容代码如下：

div id=' demo ' div id=' demo 1 ' ul id=' express ' lia href=' # '召开背街小巷综合整治调度会/a/li lia href='# '加大平远街网点运营整治力度/a/li lia href='# '平远街召开计划生育业务培训会/a/li lia href='#。平原街道：干部进村宣传推介安置/a/li lia href='# '平原街道：返乡人员免费孕检/a/li lia href='# '平原街道：春节出行高峰密切关注道路交通安全/a/Li/ul/div id=' demo 2 '/div/div 3。最后，是最关键的js代码：

脚本类型='text/javascript' //获取id=demo，id=demo1，id=demo2的元素对象，并将id=demo1的内容分配给id=demo 2 var demo=document . getelementbyid(' demo ')；var demo 1=document . getelementbyid(' demo 1 ')；var demo 2=document . getelementbyid(' demo 2 ')；demo 2 . innerhtml=demo 1 . innerhtml；//将相同的高度添加到demo1，demo 2 demo 1 . style . height=demo . offset theight ' px '；demo 2 . style . height=demo . offset ThEight ' px '；//timer，每50毫秒调用一次scrollup()函数，实现文本的滚动。var timer=window . setinterval(' scrolup()'，50)；//定义函数函数scrolup(){//如果演示的高度大于演示的高度，重新给演示赋值，从0开始滑动if(演示。scrolltop=演示。右偏){演示。scroll top=0；} else { demo.scrollTop} }//打开鼠标停止滚动，关闭鼠标继续滚动。demo.onmouseover=function(){ //清除定时器clearInterval(定时器)；} demo . onmouseout=function(){//add timer timer=window . setinterval(' scrolup()'，50)；}/script以上就是本文的全部内容，希望对大家学习javascript编程有所帮助。