Home >Web Front-end >JS Tutorial >Collection of codes suitable for bulletin boards_Typical special effects

Collection of codes suitable for bulletin boards_Typical special effects

WBOYOriginal: 2016-05-16 19:19:391326browse

1. Each text message is displayed in a loop,

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

2. Display text line by line, with fading and fading effects during the conversion process

The following code is added to the <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> area

<div id="tic">
The following code is added to the <h1> area
</h1>
<p>What is ASP? </p>
<p>
Active Server Pages (ASP, Active Server Pages) is a programming environment in which you can
Use a mix of HTML, scripting languages, and components to create powerful server-side Internet applications. </p>
<p>
 If you've ever created a site that mixed HTML, scripting languages, and components, you can add ASP code to it.  
You can create an HTML user interface by adding script commands to the HTML page, and you can also include some business by using components.
business logic rules. </p>
<h2>
Components can be called by scripts or other components.  
</h2>

<p>What is ASP.NET? </p>
<p>
ASP.NET is a programming framework built on the common language runtime that can be used to build powerful Web applications on the server.  
</p>
<h2>
ASP.NET offers several important advantages over previous web development models: enhanced performance, world-class tool support, power
and flexibility, simplicity, manageability, scalability and availability, customization and extensibility, security.  
</h2>

<p>What is PHP? </p>
</div>
PHP is a server-side scripting language used to create dynamic web pages. You create pages via PHP and HTML. When a visitor opens a web page,
The server side will process the PHP command and then send the processing result to the visitor's browser, just like ASP or
Same as ColdFusion. However, unlike ASP or ColdFusion, PHP is cross-platform and open source.

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

3. Each news information appears in turn by typing

<table>  
  <tr><td>  
      <div id="visible">CCTV 快报：<a href="" id="hottext" target="_blank"></a>
</div>  
  </td></tr>  
</table>
The following code is added to the <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> area <script type="text/javascript">

//more javascript from <img  src="images/link.gif" border="0" / alt="Collection of codes suitable for bulletin boards_Typical special effects" ><a   
href="http://www.smallrain.net" target="_blank">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> The following code is added to the <script type="text/javascript">  
  
</script> area <table>
  <tr><td>
      <div id="visible">CCTV Express: <a href="" id="hottext" target="_blank"><script language="JAVAscript">  
//more javascript from <img  src="images/link.gif" border="0" / alt="Collection of codes suitable for bulletin boards_Typical special effects" ><a   
href="http://www.smallrain.net" target="_blank">http://www.smallrain.net</script></a>  
  
<script language="JavaScript">  
var strArray=new Array();  
strArray[1]='张怡宁王楠晋级八强 牛剑锋不敌朝鲜人遭淘汰'  
strArray[0]='美国网球遭遇黑色星期四 罗迪克告别雅典'  
strArray[2]='18日：中国军团陷入沉闷　美国日本势头不减'  
strArray[3]='中国小球军团不顺 乒、羽分遭冷门和滑铁卢'  
strArray[4]='18日中国陷入波谷 射箭女将何影展示风范>'

showId=Math.floor(Math.random()*5);  
tempStr=strArray[showId];  
strArray[showId]=strArray[0];  
strArray[0]=tempStr;  
                  </script>
  </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.滚轴式向上滚动文字,每次只显示一行

' +'' +''); 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.文字信息一条接一条显示

以下代码加入区域<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>以下代码加入区域<script type="text/javascript">

//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+'></script>

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

// Highlighter Scroller II script- By  (<img  src="images/link.gif" border="0" / alt="Collection of codes suitable for bulletin boards_Typical special effects" ><a   
href="http://www.smallrain.net" target="_blank">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+'}')  
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 id="highlighter"   
style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-  
color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding:   
4px">')  
document.write('</script>

') 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.可以一条一条的显示文字，也可以点击展开全部文字

visibility=hide>

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

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

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

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">Freewarejava.com for free Java applets!'  
scrollercontent[1]='Got JavaScript? <a href="<img  src="images/link.gif" border="0" / alt="Collection of codes suitable for bulletin boards_Typical special effects" ><a   
href="http://www.javascriptkit.com"   
target="_blank">http://www.javascriptkit.com">JavaScript Kit 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">links page.'

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 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;">')  
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]  
+'')  
}

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需刷新才能执行]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use js to generate a list of random lottery numbers_javascript skillsNext article：Use js to generate a list of random lottery numbers_javascript skills

See more

Collection of codes suitable for bulletin boards_Typical special effects

Related articles