집 >웹 프론트엔드 >JS 튜토리얼 >게시판에 어울리는 코드 모음_전형적인 특수효과

게시판에 어울리는 코드 모음_전형적인 특수효과

WBOY원래의: 2016-05-16 19:19:391334검색

1. 각 문자 메시지는 반복적으로 표시됩니다.

에 다음 코드가 추가되었습니다.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

2. 변환 과정에서 페이딩 및 페이딩 효과를 사용하여 텍스트를 한 줄씩 표시합니다.

#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> 영역에 다음 코드가 추가됩니다.

<div id="tic">
<h1> 영역에 다음 코드가 추가됩니다.
</h1>
<p>ASP란 무엇인가요? </p>
<p>
Active Server Pages(ASP, Active Server Pages)는 다음을 수행할 수 있는 프로그래밍 환경입니다.
HTML, 스크립팅 언어 및 구성 요소를 혼합하여 사용하여 강력한 서버측 인터넷 응용 프로그램을 만듭니다. </p>
<p>
 HTML, 스크립팅 언어 및 구성 요소가 혼합된 사이트를 만든 적이 있다면 여기에 ASP 코드를 추가할 수 있습니다.  
HTML 페이지에 스크립트 명령을 추가하여 HTML 사용자 인터페이스를 생성할 수 있으며, 구성 요소를 사용하여 일부 비즈니스를 포함할 수도 있습니다.
비즈니스 로직 규칙. </p>
<h2>
구성요소는 스크립트나 기타 구성요소에 의해 호출될 수 있습니다.  
</h2>

<p>ASP.NET이란 무엇입니까? </p>
<p>
ASP.NET은 서버에서 강력한 웹 응용 프로그램을 구축하는 데 사용할 수 있는 공용 언어 런타임을 기반으로 구축된 프로그래밍 프레임워크입니다.  
</p>
<h2>
ASP.NET은 이전 웹 개발 모델에 비해 향상된 성능, 세계적 수준의 도구 지원, 강력한 성능 등 몇 가지 중요한 이점을 제공합니다.
유연성, 단순성, 관리 용이성, 확장성 및 가용성, 사용자 정의 및 확장성, 보안.  
</h2>

<p>PHP란 무엇인가요? </p>
</div>
PHP는 동적 웹 페이지를 만드는 데 사용되는 서버측 스크립팅 언어입니다. PHP와 HTML을 통해 페이지를 만듭니다. 방문자가 웹페이지를 열면,
서버 측은 PHP 명령을 처리한 다음 ASP나 ASP와 마찬가지로 처리 결과를 방문자의 브라우저로 보냅니다.
ColdFusion과 동일합니다. 그러나 ASP나 ColdFusion과 달리 PHP는 크로스 플랫폼이자 오픈 소스입니다.

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

3.

<table>  
  <tr><td>  
      <div id="visible">CCTV 快报：<a href="" id="hottext" target="_blank"></a>
</div>  
  </td></tr>  
</table>을 입력하면 각 뉴스 정보가 차례로 나타납니다.
<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> 영역 <script type="text/javascript">

//more javascript from <img  src="images/link.gif" border="0" / alt="게시판에 어울리는 코드 모음_전형적인 특수효과" ><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>에 다음 코드가 추가됩니다. <script type="text/javascript">  
  
</script> 영역 <table>에 다음 코드가 추가됩니다.
  <tr><td>
      <div id="visible">CCTV 익스프레스: <a href="" id="hottext" target="_blank"><script language="JAVAscript">  
//more javascript from <img  src="images/link.gif" border="0" / alt="게시판에 어울리는 코드 모음_전형적인 특수효과" ><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="게시판에 어울리는 코드 모음_전형적인 특수효과" ><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="게시판에 어울리는 코드 모음_전형적인 특수효과" ><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需刷新才能执行]

성명：

이전 기사：js를 사용하여 무작위 복권 번호_javascript 기술 목록 생성다음 기사：js를 사용하여 무작위 복권 번호_javascript 기술 목록 생성

게시판에 어울리는 코드 모음_전형적인 특수효과

관련 기사