您的位置：首页 >> 原创经验分享 >> 观点/配色/其他 >> 其他
javascript常用文字移动特效方法简洁版第一季（原创技巧）
155天前上传 / 您是第 680 位浏览者 / 目前有 3 条评论
使用 其他工具 完成
 甄小快  东城 / 网页设计师 积分 57 |
|
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>
本文由 站酷网 - 甄小快 原创，转载请保留此信息，多谢合作。
 {var%20f='http://v.t.sina.com.cn/share/share.php?appkey=163310332',u=z||d.location,p=['&url=',e(u),'& title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'& content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a() {if(!window.open([f,p].join(''),'mb', ['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width- 440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');}; if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}) (screen,document,encodeURIComponent,'','','http://image.zcool.com.cn/img2/cover/20/18/m_1328857392109.jpg','【分享】经验分享：javascript常用文字移动特效方法简洁版第一季（作者：@站酷网 - 甄小快）','','utf-8'));)
新浪微博
作者的其他经验分享
