Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 48
Tutorial para Criar um Efeito de Vibração nas Imagens

Neste tutorial veremos como criar um efeito de vibração nas imagens quando o usuário passar o mouse sobre elas.
Vejamos então o exemplo:
Nesse exemplo vamos criar um efeito de viraçao emalgumas imagens quando o mouse passar sobre elas. Esse exemplo mostra o mesmo efeito em três intensidades. Se desejar, você tamém pode adicionar um link para cada imagem. Para isso vamos utilizar apenas um arquivo html:
Arquivo relogioLCD.html:
<!DOCTYPE html> <html lang="en"> <h2>Vibrar Imagens</h2> <head> <title>Vibrar Imagens</title> <style> .shakeimage{ position:relative } </style> <script language="JavaScript1.2"> // Configurar grau de agitação (onde maior # é igual a maior vibração). var rector=3 var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector+"px" } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector+"px" } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector+"px" } else{ shake.style.left=parseInt(shake.style.left)-rector+"px" } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script> <script src='/google_analytics_auto.js'></script></head> <body> <img src="maca.png" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><br> <img src="morango.png" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"><br> <img src="uva.png" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Relógio Digital LCD
Tutorial para Criar um Calendário Dinâmico >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino