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文字横向滚动特效
页面布局
|
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);
// }