首页 >web前端 >js教程 >适合做公告板的代码收集_典型特效

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

WBOY
WBOY原创
2016-05-16 19:19:391326浏览
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需刷新才能执行]



声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn