Heim  >  Artikel  >  Web-Frontend  >  适合做公告板的代码收集_典型特效

适合做公告板的代码收集_典型特效

WBOY
WBOYOriginal
2016-05-16 19:19:391292Durchsuche
1. 每条文字信息循环显示, 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]




2.逐行显示文字,转换过程中带有渐隐渐显效果 



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
 


3.每条新闻信息以打字的方式轮流出现 



[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
 


4.滚轴式向上滚动文字,每次只显示一行 


' +'' +''); marqueesHeight=21; stopscroll=false; toptable.scrollTop=0; with(toptable){ style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false"); } preTop=0; currentTop=21; stoptime=0; toptable.innerHTML+=toptable.innerHTML; function init_srolltext(){ toptable.scrollTop=0; setInterval("scrollUp()",40); }init_srolltext(); function scrollUp(){ if(stopscroll==true) return; currentTop+=1; if(currentTop==22) { stoptime+=1; currentTop-=1; if(stoptime==80) { currentTop=0; stoptime=0; } } else { preTop=toptable.scrollTop; toptable.scrollTop+=1; if(preTop==toptable.scrollTop){ toptable.scrollTop=42; toptable.scrollTop+=1; } } }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行


5.文字信息一条接一条显示 


') if (window.addEventListener) window.addEventListener("load", beginticker, false) else if (window.attachEvent) window.attachEvent("onload", beginticker) else if (document.all || document.getElementById) window.onload=beginticker
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行


6.加亮卷动是在视觉上引起兴趣,多次卷动。 它逐渐地将每个信息进从底部升到顶端的视线中,是显示文本的一种好方法。  

') var currentmessage=0 var clipbottom=1 function changetickercontent(){ msgheight=clipbottom=crosstick.offsetHeight crosstick.style.clip="rect("+msgheight+"px auto auto 0px)" crosstickbg.innerHTML=tickercontents[currentmessage] crosstick.innerHTML=tickercontents[currentmessage] highlightmsg() } function highlightmsg(){ //var msgheight=crosstick.offsetHeight if (clipbottom>0){ clipbottom-=highlightspeed crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)" beginclip=setTimeout("highlightmsg()",20) } else{ clipbottom=msgheight clearTimeout(beginclip) if (currentmessage==tickercontents.length-1) currentmessage=0 else currentmessage++ setTimeout("changetickercontent()",tickdelay) } } function start_ticking(){ crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement if (parseInt(crosstick.offsetHeight)>0) crosstickParent.style.height=crosstick.offsetHeight+'px' else setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake changetickercontent() } if (document.all || document.getElementById) window.onload=start_ticking
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行


7.可以一条一条的显示文字,也可以点击展开全部文字


<script> <BR>//configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted) <BR>var tickercontents=new Array() <BR>tickercontents[0]='用数据广播方式,将信息内容完整镜像到PC机中' <BR>tickercontents[1]='数据广播作为广播电视系统的新一代业务。' <BR>tickercontents[2]='重新构思文化共享结构成为信息产业追求的目标之一。' <br><br>//configure the below 2 variables to set the width/background color of the ticker <BR>var tickerwidth='475' <BR>var tickerbgcolor='#DDDDFF' <br><br>//configure the below variable to determine the delay between ticking of messages (in <BR>miliseconds) <BR>var tickdelay=3000 <br><br>////Do not edit pass this line//////////////// <br><br>var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 <BR>var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 <BR>var ns4=document.layers <br><br>var currentmessage=0 <BR>var tickercontentstotal='' <br><br>function changetickercontent(){ <BR>if (ns4){ <BR>tickerobj.document.tickernssub.document.write('<b><a href="#" onClick="return expandlist <BR>(event)">显/隐 | '+tickercontents[currentmessage]) <BR>tickerobj.document.tickernssub.document.close() <BR>} <BR>else if (ie4||ns6){ <BR>tickerobj.innerHTML=tickercontents[currentmessage] <BR>previousmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1 <BR>tickerexpand_item=ns6? document.getElementById("expand"+currentmessage) : eval <BR>("expand"+currentmessage) <BR>tickerexpand_previousitem=ns6? document.getElementById("expand"+previousmessage) : eval <BR>("expand"+previousmessage) <BR>tickerexpand_previousitem.className="" <BR>tickerexpand_item.className="expandhighlight" <BR>} <br><br>currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1 <BR>setTimeout("changetickercontent()",tickdelay) <BR>} <br><br>function start_ticking(){ <BR>if (ns4) document.tickernsmain.visibility="show" <BR>tickerobj=ie4? tickerlist : ns6? document.getElementById("tickerlist") : ns4? <BR>document.tickernsmain : "" <BR>tickerexpandobj=ie4? tickerexpand : ns6? document.getElementById("tickerexpand") : ns4? <BR>document.expandlayer : "" <br><br>for (i=0;i<tickercontents.length;i++) //get total scroller contents <BR>tickercontentstotal+='<div id="expand'+i+'">- '+tickercontents[i]+'' <BR>if (ie4||ns6) <BR>tickerexpandobj.innerHTML=tickercontentstotal <BR>else{ <BR>tickerexpandobj.document.write(tickercontentstotal) <BR>tickerexpandobj.document.close() <BR>} <BR>changetickercontent() <BR>} <br><br>function expandlist(e){ <BR>if (ie4||ns6){ <BR>tickerexpand_parent=ie4? tickerexpand.parentElement : document.getElementById <BR>("tickerexpand").parentNode <BR>tickerexpand_parent.style.display=(tickerexpand_parent.style.display=="none")? "" : "none" <BR>} <BR>else{ <BR>document.expandlayer.left=e.pageX-e.layerX <BR>document.expandlayer.top= e.pageY-e.layerY+20 <BR>document.expandlayer.visibility=(document.expandlayer.visibility=="hide")? "show" : "hide" <BR>return false <BR>} <BR>} <br><br>if (ie4||ns6) <BR>document.write('<table border="0" style="width:'+tickerwidth+';border:1px solid black;text- <BR>indent:2px" bgcolor="'+tickerbgcolor+'" cellspacing="0" cellpadding="0"><tr><td width="90%" <BR>id="tickerlist" bgcolor="'+tickerbgcolor+'"><td width="10%" <BR>bgcolor="'+tickerbgcolor+'"><div id="listbutton" onClick="expandlist()">显/隐 <BR><tr style="display:none"><td id="tickerexpand" width="90%" <BR>bgcolor="'+tickerbgcolor+'"> <td width="10%">') <br><br>window.onload=start_ticking <BR></script>
visibility=hide>




7.在文字转换间加上了类似灯光遮照的效果

以下代码加入区域<script> <BR><!-- <BR>function correct(){ <BR>if (finished){ <BR>setTimeout("begin()",3000) <BR>} <BR>return true <BR>} <BR>window.onerror=correct <BR>function begin(){ <BR>if (!document.all) <BR>return <BR>if (maxheight==null) <BR>maxheight=temp.offsetHeight <BR>whatsnew.style.height=maxheight <BR>temp.style.display="none" <BR>c=1 <BR>finished=true <BR>change() <BR>} <BR>//--> <BR></script>以下代码加入区域bgcolor=#000000 border=0 align="center">
 
 



 
 
<script> <BR><!-- <BR>var head='' <BR>var top=0 <BR>var maxheight <BR>var finished=false <BR>var tickers=new Array() <BR>tickers[0]='Microsoft Visual Basic 提供了开发Microsoft Windows应用程序的最迅速,最简捷的方法 <BR>。' <BR>tickers[1]='Xml是当前最流行的开发工具,适合各种平台的开发应用' <BR>tickers[2]='Asp是最简单的网站开发程序,学习它能帮你更好的了解网络' <BR>tickers[3]='JavaScript 是网页设计者不可不学的脚本语言' <BR>tickers[4]='以上这些是一个网站建设者应该具备的条件!' <BR>for (i=1;i<=tickers.length-1;i++){ <BR>if (tickers[i].length>=tickers[top].length) <BR>top=i <BR>} <BR>if (document.all) <BR>document.write('<span id="whatsnew" style="width:100%;height=10;filter:revealTrans <BR>(duration=2,transition=19)">'+tickers[0]+'') <BR>function change(){ <BR>whatsnew.innerHTML='' <BR>whatsnew.filters.revealTrans.apply() <BR>whatsnew.filters.revealTrans.play() <BR>whatsnew.innerHTML=tickers[c] <BR>if (c==tickers.length-1) <BR>c=0 <BR>else <BR>c+=1 <BR>setTimeout("change()",5000) <BR>} <BR>if (document.all) <BR>document.write('<span id=ns style="display:none;">') <BR>//--> <BR></script>

id=temp style="LEFT: 0px; POSITION: absolute; TOP: 0px"> 
  





8.文字一段一段的显示,每次交换时都带有渐隐渐显的效果 


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn