网站首页/硬件软件列表/内容

JavaScript图文详细教程之完成上下文字滚动特效_javascript

硬件软件2022-05-27阅读
软件是一系列按照特定顺序组织的计算机数据和指令的集合。一般来讲软件被划分为编程语言、系统软件、应用软件和介于这两者之间的中间件。硬件是“计算机硬件”的简称。与“软件”相对,电子计算机系统中所有实体部件和设备的统称。

  JavaScript不仅可以实现文字左右滚动还能上下滚动,这样的功能其实很容易实现,并且不用自己动手做。文字左右滚动的走马灯效果是一种非常容易实现的特效,同样的,文字上下滚动循环显示也是一种非常常见而且非常容易实现的文字特效。

JavaScript教程之实现上下文字滚动特效
JavaScript教程之实现上下文字滚动特效

  具体实现方法如下:

<script language=JavaScript><p>var messages=new Array()</p><p>messages[0]="<font color=#8000FF>欢迎光临赛迪网电脑应用频道!</font></a>"</p><p>messages[1]="<font color=#FB2500>这里有织网梦工厂</font></a>"</p><p>messages[2]="<font color=#FF0066F>是网页初学者的学习园地</font></a>"</p><p>messages[3]="<font color=#FF9900>这里冲浪指南针</font></a>"</p><p>messages[4]="<font color=#00CC33>是网络爱好者天天必来充电的地方</font></a>"</p><p>messages[5]="<font color=#000000>这里有…………有精彩的内容等着你</font></a>"</p><p>var scrollerwidth=320</p><p>var scrollerheight=100</p><p>var scrollerbgcolor=´#FFFFFF´</p><p>//下面的代码不要改动</p><p>if (messages.length>1)</p><p>i=2</p><p>else</p><p>i=0</p><p>function move1(whichlayer){</p><p>tlayer=eval(whichlayer)</p><p>if (tlayer.top>0&&tlayer.top<=5){</p><p>tlayer.top=0</p><p>setTimeout("move1(tlayer)",3000)</p><p>setTimeout("move2(document.main.document.second)",3000)</p><p>return}</p><p>if (tlayer.top>=tlayer.document.height*-1){</p><p>tlayer.top-=5</p><p>setTimeout("move1(tlayer)",100)}</p><p>else{</p><p>tlayer.top=scrollerheight</p><p>tlayer.document.write(messages[i])</p><p>tlayer.document.close()</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function move2(whichlayer){</p><p>tlayer2=eval(whichlayer)</p><p>if (tlayer2.top>0&&tlayer2.top<=5){</p><p>tlayer2.top=0</p><p>setTimeout("move2(tlayer2)",3000)</p><p>setTimeout("move1(document.main.document.first)",3000)</p><p>return}</p><p>if (tlayer2.top>=tlayer2.document.height*-1){</p><p>tlayer2.top-=5</p><p>setTimeout("move2(tlayer2)",100)}</p><p>else{</p><p>tlayer2.top=scrollerheight</p><p>tlayer2.document.write(messages[i])</p><p>tlayer2.document.close()</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function move3(whichdiv){</p><p>tdiv=eval(whichdiv)</p><p>if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){</p><p>tdiv.style.pixelTop=0</p><p>setTimeout("move3(tdiv)",3000)</p><p>setTimeout("move4(second2)",3000)</p><p>return}</p><p>if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){</p><p>tdiv.style.pixelTop-=5</p><p>setTimeout("move3(tdiv)",100)}</p><p>else{</p><p>tdiv.style.pixelTop=scrollerheight</p><p>tdiv.innerHTML=messages[i]</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function move4(whichdiv){</p><p>tdiv2=eval(whichdiv)</p><p>if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){</p><p>tdiv2.style.pixelTop=0</p><p>setTimeout("move4(tdiv2)",3000)</p><p>setTimeout("move3(first2)",3000)</p><p>return}</p><p>if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){</p><p>tdiv2.style.pixelTop-=5</p><p>setTimeout("move4(second2)",100)}</p><p>else{</p><p>tdiv2.style.pixelTop=scrollerheight</p><p>tdiv2.innerHTML=messages[i]</p><p>if (i==messages.length-1)</p><p>i=0</p><p>else</p><p>i++}}</p><p>function startscroll(){</p><p>if (document.all){</p><p>move3(first2)</p><p>second2.style.top=scrollerheight}</p><p>else if (document.layers){</p><p>move1(document.main.document.first)</p><p>document.main.document.second.top=scrollerheight+5</p><p>document.main.document.second.visibility=´show´}}</p><p>window.onload=startscroll</p><p></script></p><p><ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight};</p><p>bgcolor=&{scrollerbgcolor};></p><p><layer id="first" left=0 top=1 width=&{scrollerwidth};></p><p><script language="JavaScript1.2"></p><p>if (document.layers)</p><p>document.write(messages[0])</p><p></script></p><p></layer></p><p><layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide></p><p><script language="JavaScript1.2"></p><p>if (document.layers)</p><p>document.write(messages[1])</p><p></script></p><p></layer></p><p></ilayer></p><p><script language="JavaScript1.2"></p><p>if (document.all){</p><p>document.writeln(´<span id="main2" style="position:relative;width:´+scrollerwidth+´;height:´</p><p>+scrollerheight+´;overflow:hiden;background-color:´+scrollerbgcolor+´">´)</p><p>document.writeln(´<div style="position:absolute;width:´+scrollerwidth+´;height:´</p><p>+scrollerheight+´;clip:rect(0 ´+scrollerwidth+´ ´</p><p>+scrollerheight+´ 0);left:0;top:0">´)</p><p>document.writeln(´<div id="first2" style="position:absolute;width:´+scrollerwidth+´;left:0;top:1;">´)</p><p>document.write(messages[0])</p><p>document.writeln(´</div>´)</p><p>document.writeln(´<div id="second2" style="position:absolute;width:´+scrollerwidth+´;left:0;top:0">´)</p><p>document.write(messages[1])</p><p>document.writeln(´</div>´)</p><p>document.writeln(´</div>´)</p><p>document.writeln(´</span>´)</p><p>}</p><p></script></p>

  (在需要添加该特效的网页具体位置中粘贴如下代码即可)

  注意:代码中的“var scrollerwidth=320”表示循环框宽度,“var scrollerheigh=100”表示循环框高度,“font color=# ”代表文字颜色,可以根据需要进行修改。


硬件是实在的,有模有样的。软件是程序性的。是一系列的指令。有了软件,硬件才会实现更丰富的功能。

……

相关阅读