Выпрыгивающие ссылки Печать
Автор: А.Волос   

Интересный эффект анимации на JavaScript: При наведении курсора на ссылку название ссылки надвигается на зрителя увеличиваясь в размере. Создается впечатление, что ссылка выпрыгивает наружу.


1. Посмотреть эффект
2. Скачать скрипт

Основа скрипта взята из http://web-mastery.info/
Мной модифицирована функция ringup2() и код в <body>.


<html>
<head>
<title> Jamping title</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
body {
background-color:#FAFDFF;
margin:0px; padding:0px;
font-size:12px;
color:#000;
font-family:Georgia, Helvetica, sans-serif;
}

b {

color:#00008B
}
.promo {
color:#AF0032;
font-size:12px;
text-align:center;
margin-top:20px
}
.promo a:link, .promo a:visited, .promo a:hover {
color:#0066CC;
text-decoration:underline;
}

.ringstyle {

color: #3399CC;
font-family: verdana;
font-size: 5pt;
position: absolute;
top: -50px;
visibility: visible
}
.explain {
color: #FF0000;
font-family: times;
font-size: 20pt;
left: 40px;
position: absolute;
text-align: left;
top: 80px;
width: 480px
}

.explain_a {

color: #000000;
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){

x = (document.layers) ? e.pageX : event.clientX
y = (document.layers) ? e.pageY : event.clientY
}

function ringup(arg) {

if (document.all) {
thisx = x
thisy = y
ringup2(arg)
}
}

function ringup2(arg) {

if(arg==1){

if (i_fontsize<=600) {
document.all.arg1.style.fontSize=i_fontsize
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 {
clearTimeout(timer)
i_fontsize=0
step=0
document.all.arg1.style.posTop=-10000
}
}

if(arg==2){

if (i_fontsize<=600) {
document.all.arg2.style.fontSize=i_fontsize
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 {
clearTimeout(timer)
i_fontsize=0
step=0
document.all.arg2.style.posTop=-10000
}
}

if(arg==3){

if (i_fontsize<=600) {
document.all.arg3.style.fontSize=i_fontsize
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 {
clearTimeout(timer)
i_fontsize=0
step=0
document.all.arg3.style.posTop=-10000
}
}

//------------------------
if(arg==4){

if (i_fontsize<=600) {
document.all.arg4.style.fontSize=i_fontsize
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 {
clearTimeout(timer)
i_fontsize=0
step=0
document.all.arg4.style.posTop=-10000
}
}
if(arg==5){
if (i_fontsize<=600) {
document.all.arg5.style.fontSize=i_fontsize
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 {
clearTimeout(timer)
i_fontsize=0
step=0
document.all.arg5.style.posTop=-10000
}
}
if(arg==6){
if (i_fontsize<=600) {
document.all.arg6.style.fontSize=i_fontsize
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 {
clearTimeout(timer)
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&amp;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&amp;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>

Вверх

Обновлено 09.05.2011 07:59