单行文字不断向上滚动特效

解决方案1

 1 <script>
 2 var marqueeContent=new Array();
 3   //滚动新闻
 4 marqueeContent[1]='世界名牌理事会会员单位<br>';
 5 marqueeContent[2]='2008中国十大美容美体连锁机构<br>';
 6 marqueeContent[3]='2008中国十佳明星美容院<br>';
 7 marqueeContent[4]='商务部特许经营备案企业<br>';
 8 marqueeContent[0]='web3.0时代<br>';
 9 var marqueeInterval=new Array();  //定义一些常用而且要经常用到的变量
10 var marqueeId=0;
11 var marqueeDelay=2000;
12 var marqueeHeight=20;
13 function initMarquee() {
14  var str=marqueeContent[0];
15  document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
16  marqueeId++;
17  marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
18  }
19 function startMarquee() {
20  var str=marqueeContent[marqueeId];
21   marqueeId++;
22  if(marqueeId>=marqueeContent.length) marqueeId=0;
23  if(marqueeBox.childNodes.length==1) {
24   var nextLine=document.createElement('DIV');
25   nextLine.innerHTML=str;
26   marqueeBox.appendChild(nextLine);
27   }
28  else {
29   marqueeBox.childNodes[0].innerHTML=str;
30   marqueeBox.appendChild(marqueeBox.childNodes[0]);
31   marqueeBox.scrollTop=0;
32   }
33  clearInterval(marqueeInterval[1]);
34  marqueeInterval[1]=setInterval("scrollMarquee()",20);
35  }
36 function scrollMarquee() {
37  marqueeBox.scrollTop++;
38  if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
39   clearInterval(marqueeInterval[1]);
40   }
41  }
42 initMarquee();
43 </script>

解决方案2

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <style>
10       div{width:200px;height:20px;overflow:hidden;}
11   </style>
12  </head>
13  <body>
14   <div id="container"><div>第一个标题</div><div>第二个标题</div><div>第三个标题</div></div>   //这里的div之间不能留有空格或者换行
15   <script language="JavaScript">
16
17     function roll()
18     {
19         var container=document.getElementById('container');
20         var child = container.firstChild;
21
22         if(child.style.marginTop=='')
23         {
24             child.style.marginTop='0px';
25         }
26
27         if(parseInt(child.style.marginTop)==-child.offsetHeight)
28         {
29             child.style.marginTop = "0px";
30             container.appendChild(child);
31             setTimeout("roll()",roll.stoptime)
32         }
33         else
34         {
35             if(parseInt(child.style.marginTop) - roll.step < -child.offsetHeight)
36             {
37                 child.style.marginTop = - child.offsetHeight + "px";
38             }
39             else
40             {
41                  child.style.marginTop = parseInt(child.style.marginTop) - roll.step + "px";
42                  setTimeout("roll()",roll.timeout)
43             }
44
45         }
46     }
47
48     roll.timeout = 20;    //时长
49     roll.step = 1;        //步伐
50     roll.stoptime = 2000; //停留时间
51     roll();
52
53   </script>
54  </body>
55 </html>

论坛地址：http://bbs.blueidea.com/thread-2848725-1-1.html

在实际测试中发现，上面代码不兼容火狐和谷歌浏览器（其他浏览器尚未测试），其原因是以为浏览器对dom元素的解析不同。

IE会忽略节点之间生成的空白文本节点（比如换行字符），而火狐则不会，所以取到的firstChild会存在差异。
做兼容性处理后的代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <style>
10       div{width:200px;height:20px;overflow:hidden;}
11   </style>
12  </head>
13  <body>
14   <!--这里的html代码可以任意格式化-->
15   <div id="container">
16        <div>第一个标题</div>
17        <div>第二个标题</div>
18        <div>第三个标题</div>
19    </div>
20  </body>
21
22   <script language="JavaScript">
23     //获取第一个子元素
24     function get_firstchild(obj)
25     {
26          var child=obj.firstChild;
27          while (child.nodeType!=1)
28          {
29              child=child.nextSibling;
30          }
31             return child;
32     }
33
34     function roll()
35     {
36         var container=document.getElementById('container');
37         var child = get_firstchild(container);
38
39         if(child.style.marginTop=='')
40         {
41             child.style.marginTop='0px';
42         }
43
44         if(parseInt(child.style.marginTop)==-child.offsetHeight)
45         {
46             child.style.marginTop = "0px";
47             container.appendChild(child);
48             setTimeout("roll()",roll.stoptime)
49         }
50         else
51         {
52             if(parseInt(child.style.marginTop) - roll.step < -child.offsetHeight)
53             {
54                 child.style.marginTop = - child.offsetHeight + "px";
55             }
56             else
57             {
58                  child.style.marginTop = parseInt(child.style.marginTop) - roll.step + "px";
59                  setTimeout("roll()",roll.timeout)
60             }
61
62         }
63     }
64
65     roll.timeout = 20;    //时长
66     roll.step = 1;        //步伐
67     roll.stoptime = 2000; //停留时间
68
69     //执行
70     roll();
71   </script>
72 </html>

转载于:https://www.cnblogs.com/yiliweichinasoft/p/3678185.html

单行文字不断向上滚动特效相关推荐

原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
jQuery结合template.js实现单行文字有停顿连续向上滚动特效
html: <ul><li><div id="news_all"><p style="text-align: center;ma ...
html文字整体向上滚动代码,js实现文字无缝向上滚动
静态效果如下:(动态效果复制粘贴下面代码可见) 代码如下: *{ padding: 0; margin:0; } ul,li{ list-style: none } .scroll { height: ...
php移动图片,图片从上往下移动的效果制作图片向上滚动特效图片移动效果制作软件...
小编在无意间看到这么一张长长的图片,这样一个图片是有故事,里面的人物是衔接的,有人就问,那这样的一个图片可以制作成从长往下移动的这样一个效果的视频吗,其实这个是可以实现的,这也算是一种图片制作成视频的 ...
关于文字向上滚动效果
1.文字无缝向上滚动 <div class="tui-new-apply clearfix"><span>[最新资讯]</span><ul ...
html语言字体上下滚动代码,div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）...
网站公告栏一般采用滚动形式,随着jquery的出现,特效做起来更加简单,所以目前大多数网站都有自己的公告栏目,采用文字滚动的形式,今天来分享几个垂直公告文字滚动特效,分别是全面版,常用版,以及极简版! ...
jQuery实现文字向上滚动
在一些网页中,我们会看到有一行或多行文字向上滚动,就像轮播一样.那我们如何实现它呢,现在就开始吧! 单行文字 html代码 <div id="scrollDiv"> & ...
实现文字的无缝滚动、间歇性向上翻滚
文字向上滚动分为:无缝滚动.间歇性滚动间歇性滚动使用jQuery的 animate 一般情况下,向上翻滚一行内容,即一个<li></li>,但是如果是一行有多个li标签,要 ...

单行文字不断向上滚动特效

单行文字不断向上滚动特效相关推荐

最新文章

热门文章