ホームページ > 記事 > ウェブフロントエンド > Web ページ上でジャンプする JavaScript テキスト_テキスト効果

Web ページ上でジャンプする JavaScript テキスト_テキスト効果

WBOYオリジナル: 2016-05-16 18:43:421331ブラウズ

<title>ジャンプアニメーションの文字</title> 
 
<div id="object1" style="LEFT: 125px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> 
<center> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>我</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b>私</b></font></td>
</tr>
</tbody>
</table>
<div id="object2" style="LEFT: 125px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>是</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b>は</b></font></td>
</tr>
</tbody>
</table>
<div id="object3" style="LEFT: 185px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>真</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b>真</b></font></td>
</tr>
</tbody>
</table>
<div id="object4" style="LEFT: 215px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>的</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b> の</b></font></td>
</tr>
</tbody>
</table>
<div id="object5" style="LEFT: 245px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>爱</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b>愛情</b></font></td>
</tr>
</tbody>
</table>
<div id="object6" style="LEFT: 243px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>你</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000" width="10"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b>你</b></font></td>
</tr>
</tbody>
</table>
<div id="line1" style="HEIGHT: 24px; LEFT: 27px; POSITION: absolute; TOP: 215px; WIDTH: 707px; Z-INDEX: 1"> 
<table bgcolor="#000000"> 
<tbody> 
<tr> 
<td>
<font color="#33ff33"> 
</font><center><b>________________________</b></center>
</td>
</tr>
</tbody>
</table> 
<table bgcolor="#000000"> 
<tbody> 
<tr> 
<td><font color="#33ff33"> 
<b>________________________</b></font></td>
</tr>
</tbody>
</table>
<div id="note" style="HEIGHT: 24px; LEFT: 31px; POSITION: absolute; TOP: 237px; WIDTH: 697px; Z-INDEX: 1"> 
<table bgcolor="#000000"> 
<tbody> 
<tr> 
<td><font color="#cccccc"><b>www.jb51.net</b></font></td>
</tr>
</tbody>
</table> 
</div>
<br><input onclick="runEx('runcode16135')" type="button" value="运行代码"><input onclick="doCopy('runcode16135')" type="button" value="复制代码"> <input onclick="doSave(runcode16135)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A 全选注:</a>如く必要取入外部Js必要刷新才能执行</div>]<script language="JavaScript"> 
var r=0 
var a=11,b=9,c=7,d=10,e=11,f=8; 
var y2=-25,y1=-25,y3=-25,y4=-25,y5=-25,y6=-25; 
var x1=305,x2=335,x3=365,x4=395,x5=425,x6=455; 
function setVariables(){ 
if (navigator.appName == "Netscape") { 
horz=".left"; 
vert=".top"; 
visShow="'show'"; 
visHide="'hide'"; 
docStyle="document."; 
styleDoc=""; 
}else{ 
horz=".pixelLeft"; 
vert=".pixelTop"; 
visHide="'hidden'"; 
visShow="'visible'"; 
doc; 
styleDoc=".style";

}

} 
function startbounce1(){ 
objectX1="object1" 
y1 += a 
evalMove1() 
if (y1<210) setTimeout("startbounce1()",20) 
else bounce1() 
} 
function bounce1(){ 
if (y1>201) a=11-r,r=Math.random()*100/25,Math.round(r); 
y1 -= a 
if (y1<100) a -= .5 
evalMove1() 
if (y1>-100) setTimeout("bounce1()",10) 
else toggle() 
}

function startbounce2(){ 
objectX2="object2" 
y2 += b 
evalMove2() 
if (y2<210) setTimeout("startbounce2()",20) 
else bounce2() 
} 
function bounce2(){ 
if (y2>201) b=8+r 
y2 -= b 
if (y2<100) b -= .5 
evalMove2() 
if (y2>-100) setTimeout("bounce2()",20) 
else toggle() 
}

function startbounce3(){ 
objectX3="object3" 
y3 += c 
evalMove3() 
if (y3<210) setTimeout("startbounce3()",20) 
else bounce3() 
} 
function bounce3(){ 
if (y3>201) c=7+r 
y3 -= c 
if (y3<100) c -= .5 
evalMove3() 
if (y3>-100) setTimeout("bounce3()",10) 
else toggle() 
}

function startbounce4(){ 
objectX4="object4" 
y4 += d 
evalMove4() 
if (y4<210) setTimeout("startbounce4()",20) 
else bounce4() 
} 
function bounce4(){ 
if (y4>201) d=8+r 
y4 -= d 
if (y4<100) d -= .5 
evalMove4() 
if (y4>-100) setTimeout("bounce4()",20) 
else toggle() 
}

function startbounce5(){ 
objectX5="object5" 
y5 += e 
evalMove5() 
if (y5<210) setTimeout("startbounce5()",10) 
else bounce5() 
} 
function bounce5(){ 
if (y5>201) e=12-r 
y5 -= e 
if (y5<100) e -= .5 
evalMove5() 
if (y5>-100) setTimeout("bounce5()",20) 
else toggle() 
}

function startbounce6(){ 
objectX6="object6" 
y6 += f 
evalMove6() 
if (y6<210) setTimeout("startbounce6()",10) 
else bounce6() 
} 
function bounce6(){ 
if (y6>201) f=8+r 
y6 -= f 
if (y6<100) f -= .5 
evalMove6() 
if (y6>-100) setTimeout("bounce6()",10) 
else toggle() 
}

function evalMove6(){ 
eval(docStyle + objectX6 + styleDoc + horz + '=' + x6); 
eval(docStyle + objectX6 + styleDoc + vert + "=" + y6); 
}

function evalMove5(){ 
eval(docStyle + objectX5 + styleDoc + horz + '=' + x5); 
eval(docStyle + objectX5 + styleDoc + vert + "=" + y5); 
} 
function evalMove4(){ 
eval(docStyle + objectX4 + styleDoc + horz + '=' + x4); 
eval(docStyle + objectX4 + styleDoc + vert + "=" + y4); 
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：LazyForm jQuery プラグイン CheckBox Radio と Select_jquery をカスタマイズする次の記事：LazyForm jQuery プラグイン CheckBox Radio と Select_jquery をカスタマイズする

続きを見る

Web ページ上でジャンプする JavaScript テキスト_テキスト効果

関連記事