交替显示的文字，展开显示全部时有选中效果

发布时间：2018-08-16 04:13:25 所属栏目：PHP教程来源：站长网

导读：Java script+CSS实现网页中交替显示的文字，将显示的每一条文字说明储存在数组中，jS可自行调用，还可以显示/隐藏全部的文字，展开显示全部时有选中效果，适于放在网站的一侧，作为公告显示使用，感谢您关注烈火网。示例： htmlheadtitle文字交替显示，可

　　Javascript+CSS实现网页中交替显示的文字，将显示的每一条文字说明储存在数组中，jS可自行调用，还可以显示/隐藏全部的文字，展开显示全部时有选中效果，适于放在网站的一侧，作为公告显示使用，感谢您关注烈火网。

　　示例：

<html> <head> <title>文字交替显示，可折叠隐藏和显示全部</title> <STYLE> </STYLE> </head> <body> <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]='这是一个文字交替显示，可折叠隐藏和显示全部' tickercontents[1]='利用javascript+css来实现的，可扩展更多内容' tickercontents[2]='感谢您关注烈火网，我们的网址是www.veryhuo.com' //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("<b>Opera</b>")==-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 VeryHuo_item=ns6? document.getElementById("expand"+currentmessage) : eval("expand"+currentmessage) VeryHuo_previousitem=ns6? document.getElementById("expand"+previousmessage) : eval("expand"+previousmessage) VeryHuo_previousitem.className="" VeryHuo_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 : "" VeryHuoobj=ie4? VeryHuo : ns6? document.getElementById("VeryHuo") : 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) VeryHuoobj.innerHTML=tickercontentstotal else{ VeryHuoobj.document.write(tickercontentstotal) VeryHuoobj.document.close() } changetickercontent() } function expandlist(e){ if (ie4||ns6){ VeryHuo_parent=ie4? VeryHuo.parentElement : document.getElementById("VeryHuo").parentNode VeryHuo_parent.style.display=(VeryHuo_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="VeryHuo" 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> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!