Интересный эффект анимации на JavaScript: При наведении курсора на ссылку название ссылки надвигается на зрителя увеличиваясь в размере. Создается впечатление, что ссылка выпрыгивает наружу.
1.
Посмотреть эффект
2.
Скачать скрипт
Мной модифицирована функция ringup2() и код в <body>.
<head>
<title> Jamping title</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
body {
margin:0px; padding:0px;
font-size:12px;
color:#000;
font-family:Georgia, Helvetica, sans-serif;
b {
.promo {
font-size:12px;
text-align:center;
margin-top:20px
.promo a:link, .promo a:visited, .promo a:hover {
text-decoration:underline;
.ringstyle {
font-family: verdana;
font-size: 5pt;
position: absolute;
top: -50px;
visibility: visible
.explain {
font-family: times;
font-size: 20pt;
left: 40px;
position: absolute;
text-align: left;
top: 80px;
width: 480px
.explain_a {
font-family: times;
font-size: 20pt;
left: 40px;
position: absolute;
text-align: right;
top: 80px;
width: 480px
a {
color: #0000FF;
font-family: times;
text-decoration: underline
}
a:visited {
color: #0000FF
}
-->
<!-- web-mastery.info -->
</style>
<script>
<!--
var mas = []
mas[0] = "Omericano"
mas[1] = "Over and over"
mas[2] = "Hello Dolly"
var x,y
var timer
var i_fontsize=0
var step=0
var thisx,thisy
function handlerMM(e){
y = (document.layers) ? e.pageY : event.clientY
function ringup(arg) {
thisy = y
ringup2(arg)
function ringup2(arg) {
if(arg==1){
document.all.arg1.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"
document.all.arg1.style.posLeft=thisx-(Math.floor(i_fontsize/3))
document.all.arg1.style.posTop=thisy-(Math.floor(i_fontsize/1.4))
step+=4
i_fontsize+=step
timer=setTimeout("ringup(1)",50)
else {
i_fontsize=0
step=0
document.all.arg1.style.posTop=-10000
if(arg==2){
document.all.arg2.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"
document.all.arg2.style.posLeft=thisx-(Math.floor(i_fontsize/3))
document.all.arg2.style.posTop=thisy-(Math.floor(i_fontsize/1.4))
step+=4
i_fontsize+=step
timer=setTimeout("ringup(2)",50)
else {
i_fontsize=0
step=0
document.all.arg2.style.posTop=-10000
if(arg==3){
document.all.arg3.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"
document.all.arg3.style.posLeft=thisx-(Math.floor(i_fontsize/3))
document.all.arg3.style.posTop=thisy-(Math.floor(i_fontsize/1.4))
step+=4
i_fontsize+=step
timer=setTimeout("ringup(3)",50)
else {
i_fontsize=0
step=0
document.all.arg3.style.posTop=-10000
//------------------------
if(arg==4){
document.all.arg4.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"
document.all.arg4.style.posLeft=thisx-(Math.floor(i_fontsize/3))
document.all.arg4.style.posTop=thisy-(Math.floor(i_fontsize/1.4))
step+=4
i_fontsize+=step
timer=setTimeout("ringup(4)",50)
else {
i_fontsize=0
step=0
document.all.arg4.style.posTop=-10000
if(arg==5){
document.all.arg5.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"
document.all.arg5.style.posLeft=thisx-(Math.floor(i_fontsize/3))
document.all.arg5.style.posTop=thisy-(Math.floor(i_fontsize/1.4))
step+=4
i_fontsize+=step
timer=setTimeout("ringup(5)",50)
else {
i_fontsize=0
step=0
document.all.arg5.style.posTop=-10000
if(arg==6){
document.all.arg6.style.color="rgb(255,"+Math.floor(i_fontsize/6)+","+Math.floor(i_fontsize/6)+")"
document.all.arg6.style.posLeft=thisx-(Math.floor(i_fontsize/3))
document.all.arg6.style.posTop=thisy-(Math.floor(i_fontsize/1.4))
step+=4
i_fontsize+=step
timer=setTimeout("ringup(6)",50)
else {
i_fontsize=0
step=0
document.all.arg6.style.posTop=-10000
}
document.onmousemove = handlerMM;
// - End of JavaScript - -->
</script>
</head>
<!-- ///////////////////////////////////// -->
<body text="red" link="blue" vlink="purple" alink="red">
<p>
<IMG SRC="ric_01_01.JPG" BORDER="0" ALIGN="Выравнивание"
WIDTH="254" HEIGHT="192" ALT="Подсказка" NAME="Имя" >
<p>
<TABLE WIDTH="30%" BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<CAPTION>
<div align=center><font size=6 color="magenta" face="Comic Sans MS,Tahoma">
Time of the music
</font></div>
</CAPTION>
<TR>
<TD ALIGN=CENTER BGCOLOR= #00FFFF><FONT SIZE ="5">
<a href="http://www.youtube.com/watch?v=u6YLMGKzGgg&feature=related" target="self" title="pick4you" onmouseover="ringup(1)">Americano</a></p>
</TD>
<TD ALIGN=CENTER BGCOLOR= #00FFFF><FONT SIZE ="5">
<a href="http://www.youtube.com/watch?v=fDvRt5UsNKM" target="self" title="pick4you" onmouseover="ringup(4)">Killing me softly </a></p>
</TD>
</TR>
<TR>
<TD ALIGN=CENTER BGCOLOR= #F0F8FF><FONT SIZE ="5">
<a href="http://www.youtube.com/watch?v=2MD2ee4pU_8" target="self" title="pick4you" onmouseover="ringup(2)">Over and over </a></p>
</TD>
<TD ALIGN=CENTER BGCOLOR= #F0F8FF><FONT SIZE ="5">
<a href="http://www.youtube.com/watch?v=SvlM67QT-4E" target="self" title="pick4you" onmouseover="ringup(5)">Cecilia </a></p>
</TD>
</TR>
<TR>
<TD ALIGN=CENTER BGCOLOR= #00FFFF><FONT SIZE ="5">
<a href="http://www.youtube.com/watch?v=kmfeKUNDDYs" target="self" title="pick4you" onmouseover="ringup(3)">Hello Dolly </a></p>
</TD>
<TD ALIGN=CENTER BGCOLOR= #00FFFF><FONT SIZE ="5">
<a href="http://www.youtube.com/watch?v=WuG35Tbrtbw&feature=related" target="self" title="pick4you" onmouseover="ringup(6)">El Condor Pasa </a></p>
</TD>
</TR>
</TABLE>
<p>
<div class="ringstyle" id="arg1">Americano</div>
<div class="ringstyle" id="arg2">Over and over!</div>
<div class="ringstyle" id="arg3">Hello Dolly</div>
<div class="ringstyle" id="arg4">Killing me softly</div>
<div class="ringstyle" id="arg5">Cecilia</div>
<div class="ringstyle" id="arg6">El Condor Pasa</div>
</body>
</html>