html5用什么来代替 marquee制作滚动字幕呢?

html-css012

html5用什么来代替 marquee制作滚动字幕呢?,第1张

由于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>

Dreamweaver没有Frontpag滚动字幕、鼠标悬停等自动生成的特效。网页效果都是用代码形成的,如果你确实需要这两种特效,而又想在dreamweave里面编辑网页,可以在Frontpag中生成特效,然后把相应的代码拷贝到dreamweaver中再继续编辑页面。

Frontpag是一个很早的软件,其中的一些特效相对来说比较旧了。其实可以在网络上找一些更新的更好看的特效代码,拷贝到网页里使用替代旧特效。而Dreamweaver CS6或更新的版本对css3、html5、jquery结合的更紧密,有时间学习一下的话就可以制作更好的效果。