Home > Article > Web Front-end > javascript text jumping on web page_text effects

javascript text jumping on web page_text effects

WBOYOriginal: 2016-05-16 18:43:421290browse

<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); 
}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：LazyForm jQuery plugin Customize your CheckBox Radio and Select_jqueryNext article：LazyForm jQuery plugin Customize your CheckBox Radio and Select_jquery

See more

javascript text jumping on web page_text effects

Related articles