適合做公告板的代碼收集

2019-11-21 02:17:30

字體：大中小

來源：轉載

供稿：網友

1. 每條文字信息循環顯示，

以下代碼加入<head>區域<style>  #oneLiners {  background-color:#00c;  color:#fd0;  font-weight:bold;  }  </style>  <script language="javascript">    </script>   在<body>中加上onLoad="setOneLiners();"   <body onLoad="setOneLiners();">   以下代碼加入<body>區域<div   class="iwvjtn8m0"   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://www.jb51.netimages/link.gif" border="0" /><a    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   class="iwvjtn8m0"   id="tic">  <h1>什么是ASP？</h1>  <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>  <script type="text/javascript">    </script>

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

3.每條新聞信息以打字的方式輪流出現

以下代碼加入<head>區域<script language=JAVAscript>  //more javascript from <img src="https://www.jb51.netimages/link.gif" border="0" /><a    target="_blank">http://www.smallrain.net</a>    </script>以下代碼加入<body>區域<table>    <tr><td>        <div   class="iwvjtn8m0"   id=visible>CCTV 快報：<a href="" id=hottext target="_blank"></a></div>    </td></tr>  </table>  <div   class="iwvjtn8m0"   id=incoming style="DISPLAY: none">    <div   class="iwvjtn8m0"   id=AllNews>                         <div   class="iwvjtn8m0"   id=1>        <div   class="iwvjtn8m0"   id=Summary>全國政協代表團出訪三國 出席經社理事會會議</div>        <div   class="iwvjtn8m0"   id=NewsLink>#</div>       </div>                        <div   class="iwvjtn8m0"   id=2>        <div   class="iwvjtn8m0"   id=Summary>[東方時空]六天七夜降服森林大火</div>        <div   class="iwvjtn8m0"   id=NewsLink>#</div>       </div>                        <div   class="iwvjtn8m0"   id=3>        <div   class="iwvjtn8m0"   id=Summary>香港特區政府就曾蔭權請辭政務司司長發表聲明</div>        <div   class="iwvjtn8m0"   id=NewsLink>#</div>       </div>                        <div   class="iwvjtn8m0"   id=4>        <div   class="iwvjtn8m0"   id=Summary>劉云山會見老撾客人 </div>        <div   class="iwvjtn8m0"   id=NewsLink>#</div>       </div>                        <div   class="iwvjtn8m0"   id=5>        <div   class="iwvjtn8m0"   id=Summary>曾慶紅強調先進性教育活動要自始至終注重實效</div>        <div   class="iwvjtn8m0"   id=NewsLink>#</div>       </div>                   </div>    <div   class="iwvjtn8m0"   id=AddNews>                    </div>     </div>

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

4.滾軸式向上滾動文字,每次只顯示一行

[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://www.jb51.netimages/link.gif" border="0" /><a    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   class="iwvjtn8m0"   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.加亮卷動是在視覺上引起興趣,多次卷動。它逐漸地將每個信息進從底部升到頂端的視線中,是顯示文本的一種好方法。

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

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="https://www.jb51.netimages/link.gif" border="0"   /><a    target="_blank">http://freewarejava.com</a>">Freewarejava.com </a>for free Java applets!'  scrollercontent[1]='Got JavaScript? <a href="<img src="https://www.jb51.netimages/link.gif" border="0" /><a      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="https://www.jb51.netimages/link.gif" border="0" /><a    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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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 全選注:如需引入外部Js需刷新才能執行]

上一篇：照片各部分的彩色與黑白交替更換

下一篇：圖片自動播放也可通過按鈕控制顯示