<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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)