html滚动文字代码是什么?

html滚动文字代码是什么?,第1张

<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()>此处输入滚动内容 </marquee>

◎ direction表示滚动的方向,值可以是left,right,up,down,默认为left

◎ behavior表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(往返滚动)

◎ loop表示循环的次数,值是正整数,默认为无限循环

◎ scrollamount表示运动速度,值是正整数,默认为6

◎ scrolldelay表示停顿时间,值是正整数,默认为0,单位似乎是毫秒

◎ align表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle

◎ bgcolor表示运动区域的背景色,值是16进制的RGB颜色,默认为白色

◎ height、width表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度

◎ hspace、vspace表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。

◎ onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

<style>

/*文字滚动样式*/

#scroll{margin:0list-style:nonewidth:860pxheight:40pxoverflow:hidden}

#scroll li {margin:0padding:0 4pxfont-size:12pxheight:40pxfloat:none}

#scroll2{margin:0list-style:nonewidth:860pxheight:60pxoverflow:hidden}

#scroll2 li {margin:0padding:0 4pxfont-size:12pxheight:18px}

#scroll2 a{color:#0365CBfont-weight:boldwidth:270pxdisplay:block}

#scroll dl{margin:0pxpadding:0pxfloat:leftpadding-right:60pxcolor:#FF7300}

#scroll span{font-weight:boldcolor:#FF7400}

</style>

<!--文字从下往上滚动-->

var timeScroll= false

window.onload = function() {

dMarquee('scroll',timeScroll)

}

function dMarquee(id,timer){

var speed=30//速度

var stop=2000//停止时间

var ul = document.getElementById(id)

var rows=ul.getElementsByTagName('li').length

var height = ul.getElementsByTagName('li')[0].offsetHeight

ul.innerHTML += ul.innerHTML

var contain=ul.innerHTML

var play = function() {

ul.scrollTop++

if(ul.scrollTop==rows*height){

ul.scrollTop=0

}

if(ul.scrollTop%height==0) {

timer = setTimeout(play,stop)

}else{

timer = setTimeout(play,speed)

}

}

timer = setTimeout(play,stop)

ul.onmouseover = function() {clearTimeout(timer)}

ul.onmouseout = play

}

<!--测试码,-->

<ul id="scroll">

<li>

<dl>

<dt><span>朗盛化学</span>2011-11-22 18:30-20:30</dt>

<dd>华东理工大学逸夫楼演讲厅</dd>

</dl>

<dl>

<dt><span>合生创展 </span>2011-11-22 19:00-21:00</dt>

<dd>四川大学就业指导中心201(望江校区)</dd>

</dl>

<dl>

<dt><span>百视通</span>2011-11-24 16:00</dt>

<dd>西安交通大学教2—100教室(本部)</dd>

</dl>

</li>

<li>

<dl>

<dt><span>北大方正</span>2011-11-22 19:00-21:00</dt>

<dd>复旦大学行政楼106报告厅(张江校区)</dd>

</dl>

<dl>

<dt><span>中信银行</span>2011-11-22 19:00</dt>

<dd>华南理工大学多功能报告厅(五山校区)</dd>

</dl>

<dl>

<dt><span>金地 </span>2011-11-24 16:00</dt>

<dd>湖南大学复临舍201报告厅(本部)</dd>

</dl>

</li>

<li>

<dl>

<dt><span>3M中国</span>2011-11-24 16:00</dt>

<dd>华东理工大学逸夫楼演讲厅</dd>

</dl>

<dl>

<dt><span>大族激光</span>2011-11-22 19:00-21:00</dt>

<dd>长春理工大学 就业指导中心信息发布厅</dd>

</dl>

<dl>

<dt><span>天普药业</span>2011-12-01 19:00-21:00</dt>

<dd>天津中医药大学 天中宾馆二楼多功能厅)</dd>

</dl>

</li>

</ul>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5942253.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-09
下一篇 2023-03-09

发表评论

登录后才能评论

评论列表(0条)

保存