Efeito múltiplo no mouse

 

Para conseguir um efeito de várias imagens "girando", conforme o mouse se mexe, como se pode observar neste exemplo, faça o seguinte:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Apague tudo o que está escrito nela.

4. Cole o seguinte script:

Obs.: Substitua os endereços das imagens que estão em vermelho pelos endereços das imagens que você quer usar. É mais adequado usar uma figura pequena no espaço indicado para "imagem do mouse".

---------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>http://www.ilove.com.br/lili - Efeito Múltiplo Mouse</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><BASE
href=file://C:\Scripts\>
<STYLE>BODY {
MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 10pt; MARGIN-BOTTOM: 0em; MARGIN-LEFT: 0px; COLOR: #6c614f; FONT-FAMILY: "Arial"
}
BODY {

}
</STYLE>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff background="endereço da imagem do plano de fundo">
<DIV><FONT size=4><BR></FONT>&nbsp;</DIV><FONT size=4><IMG id=balloon
style="DISPLAY: none" src="endereço da imagem do mouse">
<SCRIPT language=javascript>
var images=balloon.src;//Put your image name here!!
var amount=7;//Number of images here. Do not alter for this script!!
var cnter=70;
var step;
var currStep = 0;
var Xpos = 0;
var Ypos = 0;
if (document.all)
{
document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">')
document.write('<div id="c" style="position:relative">');
for (n=0; n < amount; n++)
document.write('<img src=" '+images+'" style="position:absolute;top:0px;left:0px">')
document.write('</div>')
document.write('</div>')

function MsieMouseFollow(){
Xpos = document.body.scrollLeft+event.x-5;
Ypos = document.body.scrollTop+event.y-5;
}
document.onmousemove = MsieMouseFollow;
}
else if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
for (ns=0; ns < amount; ns++)
document.write("<LAYER NAME='n"+ns+"' LEFT=0 TOP=0><IMG SRC='"+images+"'></LAYER>");
function NsMouseFollow(evnt){
Xpos = evnt.pageX-5;
Ypos = evnt.pageY-5;
}
window.onMouseMove = NsMouseFollow;
}

function Swirl(){
if (currStep<0.0550)
step=0.001;
if (document.all)
{
for (i=0;i<ieDiv.all.c.all.length;i++)
{
ieDiv.all.c.all[i].style.top = Ypos+cnter*Math.cos((currStep+i*4.5)/5)*Math.sin((currStep)*150);
ieDiv.all.c.all[i].style.left = Xpos+cnter*Math.sin((currStep+i*4.5)/5)*Math.sin((currStep)*150);
}
}
else if (document.layers)
{
for ( i = 0 ; i < ns ; i++ )
{
var temp="n"+i
document.layers[temp].top = Ypos+cnter*Math.cos((currStep+i*4.5)/5)*Math.sin((currStep)*150);
document.layers[temp].left =Xpos+cnter*Math.sin((currStep+i*4.5)/5)*Math.sin((currStep)*150);
}
}
currStep += step;
setTimeout("Swirl()", 10);
if (currStep>0.0540)
{
step+=0.002;
if (document.layers)
{
for ( i = 0 ; i < ns ; i++ )
{
var temp="n"+i
document.layers[temp].top =Ypos+cnter*Math.cos((currStep+i*4.5)/5)
document.layers[temp].left=Xpos+cnter*Math.sin((currStep+i*4.5)/5)
}
}
else if (document.all)
{
for (i=0;i<ieDiv.all.c.all.length;i++)
{
ieDiv.all.c.all[i].style.top=Ypos+cnter*Math.cos((currStep+i*4.5)/5)
ieDiv.all.c.all[i].style.left=Xpos+cnter*Math.sin((currStep+i*4.5)/5)
}
}
}
if (step > 0.5)
{
step=0.5;
cnter-=8;
}
if (document.layers)
_y=-window.innerWidth;
else if (document.all)
_y=-document.body.clientWidth;
if (cnter <= _y)
{
currStep=0;
step=0.001;
cnter=70;
}
}
Swirl();
// -->
</SCRIPT>
</FONT>
<P align=center><BR><BR></P>
<DIV align=center>
<CENTER><BR><BR>&nbsp;</CENTER></DIV>
<SCRIPT language=JavaScript1.2>
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
/*alt=1
else
alt=0*/ /*esta parte faz com que volte para o topo.*/
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",50)
}
window.onload=initialize
</SCRIPT>
<BR></BODY></HTML>


--------------------------------------------------------------------------------

Veja nesta dica como encontrar o "endereço da imagem".

Aqui você encontra a versão prontinha para e-mail dessa tabela. Está zipada no formato .eml (próprio para o Outlook Express)

(Dica adaptada por Lilian Russo)

 

Lilian Russo - Todos os Direitos Reservados - ©2002/2008



.