当前位置：Gxlcms > JavaScript > 适合做公告板的代码收集_典型特效

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

时间：2021-07-01 10:21:17 帮助过：13人阅读

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

以下代码加入<head>区域<style>  
#oneLiners {  
background-color:#00c;  
color:#fd0;  
font-weight:bold;  
}  
</style>  
<script language="javascript">  
<!--  
var oneliners = new Array();  
oneliners[0] = "顷在黄州，春夜行蕲水中。";  
oneliners[1] = "过酒家饮酒，醉。";  
oneliners[2] = "乘月至一溪桥上，解鞍曲肱，醉卧少休。";  
oneliners[3] = "及觉已晓。";  
oneliners[4] = "乱山攒拥，流水铿然，疑非人世也。";  
oneliners[5] = "书此语桥柱上。";  
oneliners[6] = "照野弥弥浅浪，横空隐隐层霄。";  
oneliners[7] = "障泥未解玉骢骄，我欲醉眠芳草。";  
oneliners[8] = "可惜一溪风月，莫教踏碎琼瑶。";  
oneliners[9] = "解鞍欹枕绿杨桥，杜宇一声春晓。";

var curr_oneliner, oneliner_char, oneliner_pos, the_oneliner;  
function setOneLiners() {  
    the_oneliner = Math.floor(Math.random()*oneliners.length);  
    oneliner_pos = 0;  
    oneliner_char = oneliners[the_oneliner].split("");  
    clear_line = setInterval("clearOneLiner();",20);  
    setTimeout("setOneLiners();",5000);  
};  
function clearOneLiner() {  
    var curr_length = document.getElementById("oneLiners").innerHTML.length;  
    var curr_line = document.getElementById("oneLiners").innerHTML;  
    if (curr_length != 0) {  
        curr_line = curr_line.substring(1,curr_length);  
        document.getElementById("oneLiners").innerHTML = curr_line;  
    } else {  
        clearInterval(clear_line);  
        oneliner_int = setInterval("rollOneLiner()",20);  
    };  
};  
function rollOneLiner() {  
    //document.getElementById("oneLiners").style.width = oneliner_char.length*8;  
    document.getElementById("oneLiners").innerHTML += oneliner_char[oneliner_pos];  
    if (oneliner_pos < oneliner_char.length-1) {  
        oneliner_pos++;  
    } else {  
        oneliner_pos = 0;  
        clearInterval(oneliner_int);  
    };  
};  
-->  
</ script>   
在<body>中加上onLoad="setOneLiners();"   
<body onLoad="setOneLiners();">   
以下代码加入<body>区域<div id="oneLiners"></div>

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

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="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/images/link.gif" border="0" />http://www.smallrain.net

var list; // global list variable cache  
var tickerObj; // global tickerObj cache  
var hex = 255;

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">  
<h2>什么是ASP？</h2>  
<p>  
Ａｃｔｉｖｅ　Ｓｅｒｖｅｒ　Ｐａｇｅｓ（ASP，活动服务器页面）就是一个编程环境，在其中，可以  
混合使用HTML、脚本语言以及组件来创建服务器端功能强大的Internet应用程序。 </p>  
<p>  
 如果你以前创建过一个站点，其中混合了HTML、脚本语言以及组件，你就可以在其中加入ASP程序代码。  
通过在HTML页面中加入脚本命令，你可以创建一个HTML用户界面，并且，还可以通过使用组件包含一些商  
业逻辑规则。</p>  
<p>  
组件可以被脚本程序调用，也可以由其他的组件调用。  
</p>

<h2>什么是 ASP.NET？</h2>  
<p>  
ASP.NET 是建立在公共语言运行库上的编程框架，可用于在服务器上生成功能强大的 Web 应用程序。  
</p>  
<p>  
与以前的 Web 开发模型相比，ASP.NET 提供了数个重要的优点：增强的性能、世界级的工具支持、威力  
和灵活性、简易性、可管理性、可缩放性和可用性、自定义性和扩展性、安全性。  
</p>

<h2>什么是PHP？</h2>  
<p>  
PHP 是一种用来制作动态网页的服务器端脚本语言。你通过PHP和HTML创建页面。当访问者打开网页时，  
服务器端便会处理 PHP 指令，然后把其处理结果送到访问者的浏览器上面，就好像 ASP 或者是   
ColdFusion 一样。然而，PHP 跟 ASP 或 ColdFusion 不一样的地方在于，它是跨平台的开放源代码。  
</p>  
</div>

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

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

以下代码加入<head>区域<script language=JAVAscript>  
//more javascript from <img src="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/images/link.gif" border="0" />http://www.smallrain.net  
  
</ script>以下代码加入<body>区域<table>  
  <tr><td>  
      <div id=visible>CCTV 快报：</div>  
  </td></tr>  
</table>  
<div id=incoming style="DISPLAY: none">  
  <div id=AllNews>   
      
      
    
      <div id=1>  
      <div id=Summary>全国政协代表团出访三国 出席经社理事会会议</div>  
      <div id=NewsLink>#</div>   
    </div>  
      
      
    
      <div id=2>  
      <div id=Summary>[东方时空]六天七夜降服森林大火</div>  
      <div id=NewsLink>#</div>   
    </div>  
      
      
    
      <div id=3>  
      <div id=Summary>香港特区政府就曾荫权请辞政务司司长发表声明</div>  
      <div id=NewsLink>#</div>   
    </div>  
      
      
    
      <div id=4>  
      <div id=Summary>刘云山会见老挝客人 </div>  
      <div id=NewsLink>#</div>   
    </div>  
      
      
    
      <div id=5>  
      <div id=Summary>曾庆红强调先进性教育活动要自始至终注重实效</div>  
      <div id=NewsLink>#</div>   
    </div>  
      
      
    
 </div>

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

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

showId=Math.floor(Math.random()*5);  
tempStr=strArray[showId];  
strArray[showId]=strArray[0];  
strArray[0]=tempStr;  
                  </ script> <script>  
document.write('<table width=100% border=0 cellspacing=0 cellpadding=0>'  
+'<tr><td width=252>'  
+'<div id="toptable" style="width:252;">'  
+'<table width=252 border=0 cellspacing=0 cellpadding=0>'  
+'<tr><td width=252 height=21 class=text14 align="center" >'+strArray[0]+'</td></tr>'  
+'<tr><td height=21 class=text14 align="center" >'+strArray[1]+'</td></tr>'  
+'<tr><td height=21 class=text14 align="center" >'+strArray[2]+'</td></tr>'  
+'<tr><td height=21 class=text14 align="center" >'+strArray[3]+'</td></tr>'  
+'<tr><td height=21 class=text14 align="center" >'+strArray[4]+'</td></tr>'  
+'</td></tr>'  
+'</table>'  
+'</div>'  
+'</td></tr>'  
+'</table>');

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();

}

</ script>

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

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="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/images/link.gif" border="0" />http://www.smallrain.net

//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 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 全选注:如需引入外部Js需刷新才能执行]

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

// Highlighter Scroller II script- By  (<img src="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/images/link.gif" border="0" />http://www.smallrain.net)  
//CONFIGURE MESSAGES AND VARIABLES  
var tickercontents=new Array()  
tickercontents[0]='08:54法国外交部职员发起全球联合罢工 抗议削减预算　
　08:26巴以和平日内  
瓦倡议正式发起 中国特使出席仪式'  
tickercontents[1]='08:22土耳其车队在土东南部遭恐怖袭击造成5死4伤　
　08:13联合国高度赞扬  
中国总理温家宝探访艾滋病人'  
tickercontents[2]='08:05央行制定人民币挑剔标准 于2004年1月1日起执行　
　07:04巴格达袭击似  
有核心领导 美将发动钢铁正义行动'

var tickerwidth="200px"  
var tickerheight="70px"  
var fontcss="font: bold 14px Verdana; color:black"  
var tickdelay=3000 //delay btw messages  
var highlightspeed=2 //2 pixels at a time.  
var highlightcolor="lightyellow"  
var backdroptextcolor="#E1E1E1"

////Do not edit pass this line////////////////

document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')  
document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+';   
height:'+tickerheight+';'+fontcss+'">')  
document.write('<span id="highlighterbg"   
style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+';   
height:'+tickerheight+';padding: 4px"></span><span id="highlighter"   
style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-  
color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding:   
4px"></span>')  
document.write('</div>')

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

</ script>

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

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

以下代码加入区域bgcolor=#000000 border=0 align="center">

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

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

人气教程排行