js实现文字滚动效果

首先先看一下大致效果图，因为是动态的，在页面无法显示出来。

具体的实现代码如下：

1.首先是css代码：

<style type="text/css">
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
ul,li{list-style:none;}
a{ text-decoration:none; color:#333;}
 #demo{
    overflow:hidden; /*溢出的部分不显示*/
    width:290px;
    height:228px;/*一定要确切，避免demo1与demo2之间的距离过大*/
    padding:5px;
    margin:50px auto;
    }
#express li{
      list-style:none;
      font-size:14px;
      height:25px;
      margin:0px 5px;
      line-height:180%;/*行与行之间的距离*/
      letter-spacing:2px;/*字与字之间的距离*/
      border-bottom:1px dashed #ccc;
      cursor:pointer;
      }
</style>

2.内容代码如下：

<div id="demo" >
  <div id="demo1" >
    <ul id="express">
      <li><a href="#">召开背街小巷综合整治工作调度会</a></li>
      <li><a href="#">平原街道加大出店经营整治</a></li>
      <li><a href="#">平原街道召开计生业务培训会</a></li>
　　　　　　　<li><a href="#">平原街道：干部进村入户宣传促征迁</a></li>
　　　　　　　<li><a href="#">平原街道：为返乡群众免费孕检</a></li>
      <li><a href="#">平原街道：狠抓春运道路交通安全</a></li>
    </ul>
  </div>
  <div id="demo2"></div>
</div>

3.最后是最关键的js代码：

<script type="text/javascript">
  //获取id=demo,id=demo1,id=demo2的元素对象，并把id=demo1的内容赋值给id=demo2
  var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  demo2.innerHTML=demo1.innerHTML;
  //给demo1,demo2加相同的高度
  demo1.style.height=demo.offsetHeight+"px";
  demo2.style.height=demo.offsetHeight+"px";
  //定时器，每隔50毫秒调用一次scrollup()函数，来实现文字的滚动
  var timer=window.setInterval("scrollup()",50);
  //定义函数
  function scrollup()
  {
    //如果demo滚上去的高度大于demo的高度，重新给demo赋值从0再开始滑动
    if(demo.scrollTop>=demo.offsetHeight)
    {
      demo.scrollTop=0;
    }else
    {
      demo.scrollTop++;
    }
  }
  //鼠标放上停止滚动，鼠标离开继续滚动
    demo.onmouseover=function(){
                  //清除定时器
                  clearInterval(timer);
                  }
    demo.onmouseout=function(){
                  //添加定时器
                  timer=window.setInterval("scrollup()",50);
                  }

</script>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现单行文字不间断向上滚动的方法

    本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

  • javascript 单行文字向上跑马灯滚动显示

    代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript 模拟Marquee文字向左均匀滚动代码

    可以实现匀速.无缝.加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度.高度.速度均可以设定. Js文字向左运动 var marqueewidth=350 var marqueeheight=22 var speed=5 var marqueecontents='欢迎光临我们 网页特效栏目,精品特效全收罗!' if (document.all) document.write(''+marqueecontents+'') function regenerate()

  • JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    本文实例讲述了JavaScript实现的原生态兼容IE6可调可控滚动文字功能.分享给大家供大家参考,具体如下: 虽然HTML里面本身就有marquee标签,用来设置滚动文字(marquee标签在附录[HTML比较冷门标签与属性]里会有具体介绍)这个标签到了IE8就开始不支持,在IE6中可以设置的东西也很少,所以这东西还是用javascript来写为好.这个小组件也是比较常见的,但是网上的代码质量还是为了很多无关紧要的小特效而增加了许多无谓的代码.其实这东西,你只要弄得能自己向右向左滚,到了屏幕边

  • js 上下文字滚动效果

    js实现的文字向上滚动效果,适合文字公告等. test #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this

  • js 动态文字滚动的例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>这是一个动态Java

  • js实现的文字横向无间断滚动

    我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-fam

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

  • javascript跟随鼠标的文字带滚动效果

    比较简单常用的跟随鼠标文字滚动效果 跟随鼠标的文字带滚动效果 var scroller_msg='欢迎进入我的站点' var dismissafter=0 var initialvisible=0 if (document.all) document.write(''+scroller_msg+'') function followcursor(){ //move cursor function for IE if (initialvisible==0){ curscroll.style.vis

  • JS实现文字向下滚动完整实例

    本文实例讲述了JS实现文字向下滚动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>京东.淘宝晒单</title> <style> @charset "

  • js文字滚动停顿效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • js+div实现文字滚动和图片切换效果代码

    js+div实现文字滚动和图片切换效果代码

    本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

随机推荐