您的位置: 首页  >  IT文章  >  HTML滚动文字 marquee 滚动文字标签   W3c 不推荐使用 direction 滚动方向属性 behavior 滚动方式属性 scrolldelay 滚动延迟属性与scrollamount 滚动速度属性 loop 滚动循环属性 js文字横向滚动特效

HTML滚动文字 marquee 滚动文字标签   W3c 不推荐使用 direction 滚动方向属性 behavior 滚动方式属性 scrolldelay 滚动延迟属性与scrollamount 滚动速度属性 loop 滚动循环属性 js文字横向滚动特效

分类: IT文章 • 2022-07-14 08:43:53

<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文字横向滚动特效

页面布局 

?
1
2
3
4
5
6
7
8
9
10
11
12
<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>

样式：

?
1
2
3
.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代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//文字横向滚动
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.onmouseover=function(){
// //清除定时器
// clearInterval(timer);
// }
// demo.onmouseout=function(){
// //添加定时器
// timer=window.setInterval("scrollup()",50);
// }

相关推荐