由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了.H5里面好像没有什么替代marquee的吧。如果有请共享。互相学习。
下面是js实现代码:
body {margin: 0px
font-size: 12px
color: #938C43
line-height: 150%
text-align:center
}
a:link{color: #9D943Afont-size:12px}
a:hover{color: #FF3300font-size:12px}
a:visited{color: #9D943Afont-size:12px}
a.red:link{color: #ff0000font-size:12px}
a.red:hover{color: #ff0000font-size:12px}
a.red:visited{color: #ff0000font-size:12px}
#marqueeBox{background:#f7f7f7border:1px solid silverpadding:1pxtext-align:centermargin:0 auto}
-->
</style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array()
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>"
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>"
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>"
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>"
var marqueeInterval=new Array()
var marqueeId=0
var marqueeDelay=2000
var marqueeHeight=20
function initMarquee() {
var str=marqueeContent[0]
document.write('<div id="marqueeBox" style="overflow:hiddenwidth:250pxheight:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>')
marqueeId++
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay)
}
function startMarquee() {
var str=marqueeContent[marqueeId]
marqueeId++
if(marqueeId>=marqueeContent.length) marqueeId=0
if(document.getElementById("marqueeBox").childNodes.length==1) {
var nextLine=document.createElement('DIV')
nextLine.innerHTML=str
document.getElementById("marqueeBox").appendChild(nextLine)
}
else {
document.getElementById("marqueeBox").childNodes[0].innerHTML=str
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0])
document.getElementById("marqueeBox").scrollTop=0
}
clearInterval(marqueeInterval[1])
marqueeInterval[1]=setInterval("scrollMarquee()",20)
}
function scrollMarquee() {
document.getElementById("marqueeBox").scrollTop++
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1])
}
}
initMarquee()
</script>
</body>
<marquee>... </marquee>移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等
鼠标属性
onMouseOut=this.start() ........鼠标移出状态滚动
onMouseOver=this.stop() .........鼠标经过时停止滚动
方向
<direction=#>#=left, right ,up ,down <marquee direction=left>从右向左移!</marquee>
方式
<bihavior=#>#=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#>#=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>
速度
<scrollamount=#><marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>
延时
<scrolldelay=#><marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#>#=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
</font>
底色
<bgcolor=#>#=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>
面积
<height=# width=#><marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>
网页的滚动字幕是用<marquee></marquee>这一对标识确定的(还有JS方法等,鉴于太罗嗦,不做介绍了。如果要做上下滚动,可以用FLASH来做)。各种滚动效果的源码如下:(可以直接拷贝到网页源码<body></body>中使用)1.字幕至边框停住<marquee behavior="slide" direction="left" scrollamount="9" scrolldelay="75">移动字幕自右至左停住的效果</marquee><marquee behavior="slide" direction="right" scrollamount="9" scrolldelay="75">移动字幕自左至右停住的效果</marquee>2.字幕至边框移出循环<marquee scrollamount="9" scrolldelay="75">移动字幕自右至左出屏循环的效果</marquee><marquee direction="right" scrollamount="9" scrolldelay="75">移动字幕自左至右出屏循环的效果</marquee>3.字幕至边框往复循环<marquee scrollamount="9" scrolldelay="75" behavior="alternate">移动字幕自右至左往复的效果</marquee><marquee direction="right" scrollamount="9" scrolldelay="75" behavior="alternate">移动字幕自左至右往复的效果</marquee>【名词解释】marquee|声明使用移动文字的效果scrollamount="9"|移动文字的速度scrolldelay="75">|移动文字的帧间隔时间scrollamount/scrolldelay的经验值约为1/9-1/7左右direction="right"|移动文字的方向(缺省不写本属性为向左)behavior="slide"|字幕至边框停住的效果behavior="alternate">|字幕至边框往复循环