适合做公告板的代码收集- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 适合做公告板的代码收集

技术文章搜索

关键字

Javascript 中的适合做公告板的代码收集

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 289 ::

收藏到网摘: n/a

How to Auto Include a Javascript File 最新优化收藏到网摘代码（digg，diigo）

1. 每条文字信息循环显示，

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:

以下代码加入<head>区域
<style type="text/css">
#tic { /* enter any styles for the ticker below */ border: .05em #CEC3AD solid; font-size:0.85em; padding:10px; width:400px; line-height:20px;
}
#tic * { /* this will hide all children tags */ font-size: 1em; margin:0px; padding:0px; display:none;
}
#tic a { /* add more tags to this list if you wish to display them inside the children */ display:inline;
}
</style>
<script type="text/javascript">
//more javascript from <img src="images/link.gif" border="0" /><a
href="http://www.smallrain.net" target="_blank">http://www.smallrain.net</a>
var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 255;
function fadeText(divId) { if(tickerObj) { if(hex>0) { hex-=5; // increase color darkness tickerObj.style.color="rgb("+hex+","+hex+","+hex+")"; setTimeout("fadeText('" + divId + "')", fadeSpeed); } else hex=255; //reset hex value }
}
function initialiseList(divId) { tickerObj = document.getElementById(divId); if(!tickerObj) reportError("Could not find a div element with id \"" + divId + "\""); list = tickerObj.childNodes; if(list.length <= 0) reportError("The div element \"" + divId + "\" does not have any children"); for (var i=0; i<list.length; i++) { var node = list[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) tickerObj.removeChild(node); } run(divId, 0);
}
function run(divId, count) { fadeText(divId); list[count].style.display = "block"; if(count > 0) list[count-1].style.display = "none"; else list[list.length-1].style.display = "none"; count++; if(count == list.length) count = 0; window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) { alert("The script could not run because you have errors:\n\n" + error); return false;
}
var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal.
</script>
以下代码加入<body>区域
<div id="tic">
<h1>什么是ASP？</h1>
Ａｃｔｉｖｅ　Ｓｅｒｖｅｒ　Ｐａｇｅｓ（ASP，活动服务器页面）就是一个编程环境，在其中，可以
混合使用HTML、脚本语言以及组件来创建服务器端功能强大的Internet应用程序。 如果你以前创建过一个站点，其中混合了HTML、脚本语言以及组件，你就可以在其中加入ASP程序代码。
通过在HTML页面中加入脚本命令，你可以创建一个HTML用户界面，并且，还可以通过使用组件包含一些商
业逻辑规则。
组件可以被脚本程序调用，也可以由其他的组件调用。
<h2>什么是 ASP.NET？</h2>
ASP.NET 是建立在公共语言运行库上的编程框架，可用于在服务器上生成功能强大的 Web 应用程序。
与以前的 Web 开发模型相比，ASP.NET 提供了数个重要的优点：增强的性能、世界级的工具支持、威力
和灵活性、简易性、可管理性、可缩放性和可用性、自定义性和扩展性、安全性。
<h2>什么是PHP？</h2>
PHP 是一种用来制作动态网页的服务器端脚本语言。你通过PHP和HTML创建页面。当访问者打开网页时，
服务器端便会处理 PHP 指令，然后把其处理结果送到访问者的浏览器上面，就好像 ASP 或者是
ColdFusion 一样。然而，PHP 跟 ASP 或 ColdFusion 不一样的地方在于，它是跨平台的开放源代码。
</div>
<script type="text/javascript">
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:

以下代码加入<head>区域<style type="text/css">
#memoryticker{
background-color: lightyellow;
width: 450px;
font: bold 12px Verdana;
/*Tip: add in height attribute here for multiple line scroller*/
border: 1px solid black;
padding: 3px;
/*Change 0.7 below to a different number if desired (0.7=0.7 seconds)*/
/*Remove below line to remove transitional effect in IE. Below line should always appear
last within this CSS*/
filter: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)
}
</style>以下代码加入<body>区域<script type="text/javascript">
//more javascript from <img src="images/link.gif" border="0" /><a
href="http://www.smallrain.net" target="_blank">http://www.smallrain.net</a>
//configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted)
//Backslash any apostrophes within your text (ie: I\'m the king of the world!)
var tickercontents=new Array()
tickercontents[0]='1) 送你一串风铃'
tickercontents[1]='2) 风起，铃声响，是我对你的思念。'
tickercontents[2]='3) 送你一串风铃，'
tickercontents[3]='4) 思念，带着痛，无奈轻风不解情。 '
var persistlastviewedmsg=1 //should messages' order persist after users navigate away
(1=yes, 0=no)?
var persistmsgbehavior="onload" //set to "onload" or "onclick".
//configure the below variable to determine the delay between ticking of messages (in
miliseconds):
var tickdelay=3000
////Do not edit pass this line////////////////
var divonclick=(persistlastviewedmsg && persistmsgbehavior=="onclick")?
'onClick="savelastmsg()" ' : ''
var currentmessage=0
function changetickercontent(){
if (crosstick.filters && crosstick.filters.length>0)
crosstick.filters[0].Apply()
crosstick.innerHTML=tickercontents[currentmessage]
if (crosstick.filters && crosstick.filters.length>0)
crosstick.filters[0].Play()
currentmessage=(currentmessage==tickercontents.length-1)? currentmessage=0 :
currentmessage+1
var filterduration=(crosstick.filters&&crosstick.filters.length>0)? crosstick.filters
[0].duration*1000 : 0
setTimeout("changetickercontent()",tickdelay+filterduration)
}
function beginticker(){
if (persistlastviewedmsg && get_cookie("lastmsgnum")!="")
revivelastmsg()
crosstick=document.getElementById? document.getElementById("memoryticker") :
document.all.memoryticker
changetickercontent()
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function savelastmsg(){
document.cookie="lastmsgnum="+currentmessage
}
function revivelastmsg(){
currentmessage=parseInt(get_cookie("lastmsgnum"))
currentmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1
}
if (persistlastviewedmsg && persistmsgbehavior=="onload")
window.onunload=savelastmsg
if (document.all||document.getElementById)
document.write('<div id="memoryticker" '+divonclick+'></div>')
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
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

7.可以一条一条的显示文字，也可以点击展开全部文字
<style>

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

7.在文字转换间加上了类似灯光遮照的效果
以下代码加入<head>区域<SCRIPT>

</SCRIPT>以下代码加入<body>区域<table height=45 cellspacing=1 cellpadding=1 width="80%"
bgcolor=#000000 border=0 align="center">
<tbody>
<tr>
<td bgcolor=#D7E4F2>
<div align=center>
<script language=javascript1.2>

</script>

<span
id=temp style="LEFT: 0px; POSITION: absolute; TOP: 0px">
</span>　 </div>
</td>
</tr>
</tbody>
</table>

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

点击运行可以看到效果:

<TABLE height=120 cellSpacing=0 cellPadding=4 width=150 border=0> <TBODY> <TR> <TD> <SCRIPT language=JavaScript1.2>
var scroller_width=150
var scroller_height=120
var bgcolor='#f7f9fd'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='Visit our partner site <a href="<img src="images/link.gif" border="0"
/><a href="http://freewarejava.com"
target="_blank">http://freewarejava.com</a>">Freewarejava.com </a>for free Java applets!'
scrollercontent[1]='Got JavaScript? <a href="<img src="images/link.gif" border="0" /><a
href="http://www.javascriptkit.com"
target="_blank">http://www.javascriptkit.com</a>">JavaScript Kit</a> is the most
comprehensive JavaScript site online.'
scrollercontent[2]='Link to Dynamic Drive on your site. Please visit our <a href="<img
src="images/link.gif" border="0" /><a href="http://www.dynamicdrive.com/link.htm"
target="_blank">http://www.dynamicdrive.com/link.htm</a>">links page</a>.'
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
if (ie4||dom)
document.write('<div
style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden
"><div id="canvas0" style="position:absolute;background-
color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+
';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1"
style="position:absolute;background-
color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+
';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+'
height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub
width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]
+'</layer></ilayer>')
}
var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1
function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}
function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById
("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}
function resetit(what){
curpos=scroller_height*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos
}
function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) :
document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}
if (ie4||dom||document.layers)
window.onload=startit
</SCRIPT> </TD></TR></TBODY></TABLE>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

How to Auto Include a Javascript File 最新优化收藏到网摘代码（digg，diigo）

Javascript 中的 适合做公告板的代码收集

评论 (0) All

Javascript 中的适合做公告板的代码收集