用HTML如何实现文字滚动
展开全部
CSS
<div id="left" >
<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<br />
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font ><br />
<br />
</p >
</marquee >
</div >
marquee 参数:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。
jquery
$("#left").css()//设置div高宽,设置溢出不可见,通过改变 需要滚动的文本外容器 高度来实现滚动效果
<div id="left" >
<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<br />
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font ><br />
<br />
</p >
</marquee >
</div >
marquee 参数:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。
jquery
$("#left").css()//设置div高宽,设置溢出不可见,通过改变 需要滚动的文本外容器 高度来实现滚动效果
展开全部
楼上正解
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<div id="demo" style="overflow:hidden; width:200px; height:100px;">
<div id="demo1">
文字文字文字文字<br>
文字文字文字文字<br>
文字文字文字文字<br>
文字文字文字文字<br>
嘻嘻嘻嘻嘻嘻嘻嘻<br>
文字文字文字文字<br>
嘿嘿嘿嘿嘿嘿嘿嘿<br>
嘻嘻嘻嘻嘻嘻嘻嘻<br>
文字文字文字文字<br>
</div>
<div id="demo2"></div> </div>
<script language="javascript">
var speed=40 // 值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
//上下左右无间隙滚动 最主要是 if 语句的代码修改
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
</div>
<div id="demo1">
文字文字文字文字<br>
文字文字文字文字<br>
文字文字文字文字<br>
文字文字文字文字<br>
嘻嘻嘻嘻嘻嘻嘻嘻<br>
文字文字文字文字<br>
嘿嘿嘿嘿嘿嘿嘿嘿<br>
嘻嘻嘻嘻嘻嘻嘻嘻<br>
文字文字文字文字<br>
</div>
<div id="demo2"></div> </div>
<script language="javascript">
var speed=40 // 值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
//上下左右无间隙滚动 最主要是 if 语句的代码修改
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询