熱點(diǎn)新聞滾動(dòng)特效的js代碼

更新時(shí)間：2013年08月17日 12:38:08 作者：

我們?cè)诤芏啻笮烷T戶網(wǎng)站都會(huì)有看到有些一熱點(diǎn)新聞都會(huì)一直向上滾動(dòng)，下面我就來(lái)給大家推薦一款Javascript中熱點(diǎn)新聞滾動(dòng)特效代碼，有需要了解的朋友可以參考一下

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>熱點(diǎn)新聞滾動(dòng)</title>
<style type="text/css">

</style>
</head>

<body>
<h4>滾動(dòng)新聞</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href='http://www.dhdzp.com' target='_blank'>腳本之家</a>";
marqueeContent[1]="<a target='_blank'>播放器之家</a>";
marqueeContent[2]="<a target='_blank'>素材之家</a>";
marqueeContent[3]="<a target='_blank'>個(gè)性名字網(wǎng)</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:hidden;width:250px;height:'+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>
</html></td>
</tr>
</table>

相關(guān)文章

ES6箭頭函數(shù)和擴(kuò)展實(shí)例分析
這篇文章主要介紹了ES6箭頭函數(shù)和擴(kuò)展,結(jié)合實(shí)例形式分析了ES6箭頭函數(shù)和擴(kuò)展基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
分享Javascript中最常用的55個(gè)經(jīng)典小技巧
這篇文章主要介紹了Javascript中最常用的55個(gè)經(jīng)典小技巧。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。
2011-06-06
一文詳解MySQL5.7與MySQL8之間的區(qū)別
MySQL作為最常用的開源關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)之一,一直在不斷發(fā)展和改進(jìn),其中,MySQL 5.7和MySQL 8是兩個(gè)備受關(guān)注的版本,它們之間存在一些關(guān)鍵的差異,本文將深入探討這兩個(gè)版本之間的主要差異,需要的朋友可以參考下
2023-11-11
JS 實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽的時(shí)候讓其背景更換
點(diǎn)擊a標(biāo)簽的時(shí)候給其換背景的方法有很多，在本文將為大家介紹下js是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
javascript學(xué)習(xí)之json入門
本文主要對(duì)javascript中的JSON進(jìn)行詳細(xì)介紹。相信對(duì)于初學(xué)者具有很好的參考價(jià)值，下面就跟著小編一起來(lái)看下吧
2016-12-12
通過(guò) Dom 方法提高 innerHTML 性能
此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 與 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上則是 create 100 倍，replace 50 倍。
2008-03-03
js全選實(shí)現(xiàn)和判斷是否有復(fù)選框選中的方法
這篇文章主要介紹了js全選實(shí)現(xiàn)和判斷是否有復(fù)選框選中的方法,涉及javascript操作復(fù)選框的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇js + css實(shí)現(xiàn)標(biāo)簽內(nèi)容切換功能(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
利用JS提交表單的幾種方法和驗(yàn)證(必看篇)
下面小編就為大家?guī)?lái)一篇利用JS提交表單的幾種方法和驗(yàn)證(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09