闂傚倸鍊搁崐鎼佸磹閹间礁纾圭€瑰嫭鍣磋ぐ鎺戠倞鐟滃繘寮抽敃鍌涚厱妞ゎ厽鍨垫禍婵嬫煕濞嗗繒绠抽柍褜鍓欑粻宥夊磿闁单鍥敍濠婂懐鐒奸柣搴秵閸嬩焦绂嶅⿰鍫熺厸闁告劑鍔岄埀顒傛暬楠炲繘鍩勯崘褏绠氬銈嗗姂閸婃洟寮搁幋婢㈠酣宕惰闊剟鏌熼鐣屾噰妞ゃ垺妫冨畷鐔煎Ω閵夈倕顥氶柣鐔哥矊缁绘帡宕氶幒鎾剁瘈婵﹩鍓涢娲⒑閹稿孩鐓ラ柛妯荤矒瀹曟垿骞樼紒妯绘珖闂侀€炲苯澧撮柟顕€绠栭弫鎾绘偐閼碱剦鍚嬫俊鐐€栧Λ浣规叏閵堝鏁婇柡鍥ュ灪閳锋帒霉閿濆懏鎲哥紒澶屽劋娣囧﹪顢曢姀鈥充淮闂佽鍠氶崑銈夊极閸愵喖纾兼慨妯块哺閻擄綁姊绘担鍝ョШ婵☆偄娼¢幃鐐烘晝閸屾稑浜楅梺闈涱槴閺呮粓鎮¢悢鍏肩厸闁搞儮鏅涙禒婊堟煃瑜滈崜娆忥耿闁秴鐒垫い鎺嶈兌閸熸煡鏌熼崙銈嗗     婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌i姀鐘差棌闁轰礁锕弻鈥愁吋鎼粹€崇闂傚倸鍋嗛崹閬嶅Φ閸曨垰鍐€闁靛ě鍛帎缂傚倷娴囩紙浼村磹濠靛钃熼柨婵嗩槹閺呮煡鏌涘☉鍗炴灍闁圭兘浜堕幃妤冩喆閸曨剛顦ㄩ梺缁樻惈缁绘繂顕f繝姘亜閻炴稈鈧厖澹曞┑鐐村灦椤忎即骞嬮敃鈧壕鍧楁煛閸モ晛鏋旂紒鐘荤畺閺岀喓鈧稒岣块幊鍐煟韫囧﹥娅婇柡宀嬬秮楠炴ḿ鈧潧鎲¢崚娑㈡⒑閸濆嫭婀伴柣鈺婂灦閻涱噣宕堕鈧粈鍌炴煕濠靛嫬鍔滈柡鍛偢濮婄粯鎷呴搹鐟扮闂佺懓鎲¢幃鍌炪€侀弽銊ョ窞濠电姴瀛╃紞搴♀攽閻愬弶鈻曞ù婊勭矒楠炴垿鎳滈悙閫涚盎闂佽宕樺▔娑欑濠婂啠鏀介柍鈺佸暞閵囨繃鎱ㄦ繝鍛仩闁瑰弶鎸冲畷鐔碱敇閻旂ǹ鏅搁梺璇叉唉椤煤閻斾赴缂氱憸鏃堛€佸璺何ㄩ柨鏂垮⒔閻﹀牓姊洪幖鐐插姌闁告柨绉撮埢宥夊閵堝棌鎷洪柣鐘充航閸斿苯鈻嶉幇鐗堢厵闁告垯鍊栫€氾拷

45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:如何实现页面文字滚动效果?

如何实现页面文字滚动效果?

2016-08-28 18:06:10 来源:www.45fan.com 【

如何实现页面文字滚动效果?

<HTML>

<HEAD>

<TITLE>滚动效果</TITLE>

</HEAD>

<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0>

<body>

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 -->

<table>

<tr>

<td>

dddddddddddd

</td>

</tr>

<tr>

<td>

d11111111111

</td>

</tr>

</table>

</div>

<!-- 以下是javascript代码 -->

<script language="javascript">

<!--

marqueesHeight=200; //内容区高度

stopscroll=false; //这个变量控制是否停止滚动

with(marquees){

noWrap=true; //这句表内容区不自动换行

style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大

style.height=marqueesHeight;

style.overflowY="hidden"; //滚动条不可见

onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动

onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动

}

//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:

document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

function init(){ //初始化滚动内容

//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

} //把"templayer"的内容的“两倍”复制回原内容区:

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

//设置连续超时,调用"scrollUp()"函数驱动滚动条:

setInterval("scrollUp()",20);

}

document.body.onload=init;

preTop=0; //这个变量用于判断滚动条是否已经到了尽头

function scrollUp(){ //滚动条的驱动函数

if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动

preTop=marquees.scrollTop; //记录滚动前的滚动条位置

marquees.scrollTop+=1; //滚动条向下移动一个像素

//如果滚动条不动了,则向上滚动到和当前画面一样的位置

//当然不仅如此,同样还要向下滚动一个像素(+1):

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;

}

}

-->

</script>

dddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

</body>

</BODY>

</HTML>

 

本文地址:http://www.45fan.com/a/question/69014.html
Tags: 页面 文字 滚动
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部