javascript常用文字移动特效方法简洁版第一季

甄小快

北京/产品设计师/14年前/1718浏览

版权

甄小快

1.迅速走马灯！

var msg="不是假发！我是甄小快！谢谢支持。。。";

var interval = 100;

var space10="";

1.迅速走马灯！ <SCRIPT Language="JavaScript"> var msg="不是假发！我是甄小快！谢谢支持。。。"; var interval = 100; var space10=""; var seq=0; function Scroll() { document.tmForm.tmText.value = msg.substring(seq, msg.length) + space10 + msg.substring(0, msg.length); seq++;seq++; if ( seq > msg.length ) { seq = 0 }; window.setTimeout("Scroll();", interval ); } </SCRIPT> <BODY OnLoad="Scroll();" > <CENTER><FORM Name=tmForm> <INPUT Type=Text Name=tmText Size=45> </FORM></CENTER> 2.匀速移动，属于新闻广告以及公告展示。 <MARQUEE onmouseover=this.stop() style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体" onmouseout=this.start() scrollAmount=1 scrollDelay=10 width="200"><A href="http://www.zcool.com.cn/u/703600" target=_blank><FONT color=#FF0000>什么是网页特效？</FONT></A> <A href="http://www.zcool.com.cn/u/703600/" target=_blank><FONT color=#0000FF>如何使用网页特效？</FONT></A></MARQUEE> 3.滚动文字（可创意做成闪动彩灯） <html> <head> <title>甄小快的JS代码</title> </head> <body> <p align="center"> <SCRIPT> var temp_i=1 function flash_sms() { for (i=1;i<=9;i++) { if (i==temp_i) temp_str="orange"; else temp_str="blue"; eval("a"+i+".style.color='"+temp_str+"';"); } temp_i++; if (temp_i>9) temp_i=1; } setInterval("flash_sms()",200); </SCRIPT> <span id=a1>■</span><span id=a2>■</span><span id=a3>■</span><span id=a4>■</span><span id=a5>■</span><span id=a6>■</span><span id=a7>■</span><span id=a8>■</span><span id=a9>■</span> </body> 4.页面载入效果 <form name=loading> <P align=center>　</P> <P align=center>感谢支持，请等待片刻</P> <P align=center>　</P> <P align=center><FONT face=Arial color=#0066ff size=2>已经完成：</FONT> <INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none" size=46 name=chart> <BR> <INPUT style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center" size=47 name=percent> <script> var bar=0 var line="||" var amount="||" count() function count(){ bar=bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.value=bar+"%" if (bar<99) {setTimeout("count()",100);} else {window.location = "http://www.qpsh.com";} }</SCRIPT> </P> </form> 5.隐藏与显示 <div align="center"> <table border="0" width="300" cellpadding="0" style="border-collapse: collapse" id="table1" bgcolor="#F3F3F3" cellspacing="10"> <tr> <td valign="top" style="line-height: 150%"><div class="block" id="smallContent" style="display:block"> <span style="font-size: 9pt"> <b>银魂GINTAMA：</b>银魂（日文：ぎんたま,罗马字：Gin Tama）是日本漫画家空知英秋的连载中少年漫画作品。从2004年2号的“周刊少年Jump”开始连载[<a href="javascript:" onclick="document.all.fullContent.style.display=(document.all.fullContent.style.display=='none')?'':'none';document.all.smallContent.style.display=(document.all.smallContent.style.display=='none')?'':'none'" >详细介绍</a>]</span></div> <div class="block" id="fullContent" style="display:none;"> <span style="font-size: 9pt"> <b>银魂GINTAMA：</b>银魂（日文：ぎんたま,罗马字：Gin Tama）是日本漫画家空知英秋的连载中少年漫画作品。从2004年2号的“周刊少年Jump”开始连载作为以SF时代剧为体裁而创作的漫画，也是新人作者空知英秋的首部连载作品。作者空知英秋本来只是打算JUMP编辑部打一份短工，却没有想到漫画意外的受欢迎，之后凭借着其独特的画风和剧情，一举成为了JUMP漫画中少见的热血历史吐槽人气作品。由于超高的人气，剧场版也于2010年4月24日在日本各地放送。2010年3月25日起动画因进度追赶上漫画原作剧情而停播。2011年4月1日，银魂在众人的期待中开播第二季动画。[<a href="javascript:" onclick="document.all.fullContent.style.display=(document.all.fullContent.style.display=='none')?'':'none';document.all.smallContent.style.display=(document.all.smallContent.style.display=='none')?'':'none'" >隐藏介绍</a>]</span></div></td> </tr> </table> </div>

声明

原创文章平面 UI 网页