HTML滚动文字

最新推荐文章于 2021-06-21 18:54:33 发布

diaoyan4311

最新推荐文章于 2021-06-21 18:54:33 发布

阅读量141

点赞数

原文链接：http://www.cnblogs.com/liangbk/p/9254298.html

版权

marquee 滚动文字标签 W3c 不推荐使用

<marquee> <span style="font-weight: bolder;font-size: 40px;color: white;">Welcom CSDN!</span> </marquee>

direction 滚动方向属性

默认情况下，文字从右向左滚动，实际应用中，我们可能需要改变方向，就可以通过该属性来设置，该属性可用值有：up，down，left，right，分别表示向上、向下、向左和向右滚动。

behavior 滚动方式属性

通过behavior 可以设置滚动方式，如往复运动等。behavior可用值有：scroll，slide，alternate，分别表示循环滚动、只滚动一次就停止和来回交替滚动。

scrolldelay 滚动延迟属性与scrollamount 滚动速度属性

通过scrolldelay属性可以设置文字滚动的时间间隔。scrolldelay 的时间间隔单位是毫秒，这一时间间隔设置为滚动两步之间的时间间隔，如果时间过长，则会出现走走停停的效果。
scrollamount 用于设置滚动的步长。

loop 滚动循环属性

如果我们希望文字滚动几次后停止，就可以使用loop属性。

js文字横向滚动特效

页面布局

 
          < 
          div 
          id 
          = 
          "scroll_div" 
          class 
          = 
          "fl" 
          >  
         
 
             
          < 
          div 
          id 
          = 
          "scroll_begin" 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
              
          恭喜793765***获得 < 
          span 
          class 
          = 
          "pad_right" 
          >50元巨人点卡奖励</ 
          span 
          > 
         
 
             
          </ 
          div 
          >  
         
 
             
          < 
          div 
          id 
          = 
          "scroll_end" 
          ></ 
          div 
          > 
         
 
            
          </ 
          div 
          >  
         

样式：

 
          .pad_right{  
          padding-right 
          : 
          2em 
          ;} 
         
 
          #scroll_div { 
          height 
          : 
          26px 
          ; 
          overflow 
          :  
          hidden 
          ; 
          white-space 
          :  
          nowrap 
          ; 
          width 
          : 
          535px 
          ; 
          margin-left 
          : 
          10px 
          ;} 
         
 
          #scroll_begin,#scroll_end { 
          display 
          :  
          inline 
          ;} 
         

js代码：

 
          //文字横向滚动 
         
          function 
          ScrollImgLeft(){  
         
          var 
          speed=50; 
         
          var 
          MyMar =  
          null 
          ; 
         
          var 
          scroll_begin = document.getElementById( 
          "scroll_begin" 
          );  
         
          var 
          scroll_end = document.getElementById( 
          "scroll_end" 
          );  
         
          var 
          scroll_div = document.getElementById( 
          "scroll_div" 
          );  
         
          scroll_end.innerHTML=scroll_begin.innerHTML;  
         
          function 
          Marquee(){  
         
          if 
          (scroll_end.offsetWidth-scroll_div.scrollLeft<=0)  
         
          scroll_div.scrollLeft-=scroll_begin.offsetWidth;  
         
          else 
         
          scroll_div.scrollLeft++;  
         
          }  
         
          MyMar=setInterval(Marquee,speed);  
         
          scroll_div.onmouseover =  
          function 
          (){ 
         
          　　　　　　　clearInterval(MyMar); 
         
          　　　　　} 
         
          　　　　scroll_div.onmouseout =  
          function 
          (){ 
         
          　　　　　　　MyMar = setInterval(Marquee,speed); 　　　　 
         
          　　　　　}   
         
          } 
         
          ScrollImgLeft();

以上就是轻松实现js文字横向滚动特效，大家可以在自己的网页中添加js文字横向滚动特效。

竖向滚动

//获取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.οnmοuseοver=function(){
// //清除定时器
// clearInterval(timer);
// }
// demo.οnmοuseοut=function(){
// //添加定时器
// timer=window.setInterval("scrollup()",50);
// }