pcdicasHTML

Script - Exemplos - Acompanhando o mouse 2

Esse script exibe um efeito colorido que acompanha o mouse conforme o internauta o mova sobra a tela.


Mova o mouse e verifique.

Código


//Pretty - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var colours = new Array("#ff0000","#00ff00"); //Add as many colours as you like!
var numberOfDots = 14;
var setTimeOutSpeed = 40; //Timeout speed!
var followMouseSpeed = 0.03; //Must be less than 1 & greater than 0!
var twistAndSpinSpeed = 0.04;
var colourChangeSpeed = 2;

//End config.
var idx = document.getElementsByTagName('div').length;
for (i = 0; i < numberOfDots; i++){
document.write('<div id="dvs'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:1px;height:1px;background-color:'+colours[0]+';font-size:1px"><\/div>');
}
var h,y,ref;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi = 3.1415/180;
var buff = 74;
var the_dots = [];
var ev = 360/numberOfDots;
var step2 = 1;
var pix = "px";
var y = 0;
var x = 0;
var ry = 0;
var rx = 0;
var dy = 0;
var dx = 0;
var sy = 0;
var sx = 0;
var scy = 0;
var scx = 0;
var counter1 = idx;
var counter2 = 0;
var counter3 = 0;
var step1 = 0;

if (followMouseSpeed <= 0 || followMouseSpeed >= 1){
followMouseSpeed = 0.1;
}

if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function winSize(){
var mozBar = ((domWw) && ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
}

function scrolled(){
if (domWw){
scy = ref.pageYOffset;
scx = ref.pageXOffset;
}
else{
scy = ref.scrollTop;
scx = ref.scrollLeft;
}
}

function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == "number"){
y = e.pageY - msy;
x = e.pageX;
}
else{
y = e.clientY - msy;
x = e.clientX;
}
}

function colourStep(){
counter1 += step2;
if (counter1 >= numberOfDots+idx){
counter1 = idx;
counter2 += step2;
}
if (counter2 == colours.length){
counter2 = 0;
}
scrolled();
document.getElementById("dvs"+counter1).style.backgroundColor = colours[counter2];
}

function DoItAll(){
counter3++;
step1 -= twistAndSpinSpeed;

dy = ry+=(y-ry)*followMouseSpeed;
dx = rx+=(x-rx)*followMouseSpeed;
if (ry >= h-buff){
ry = h-buff;
}
if (ry <= buff){
ry = buff;
}
if (rx >= w-buff){
rx = w-buff;
}
if (rx <= buff){
rx = buff;
}
if (counter3 > colourChangeSpeed){
colourStep();
counter3 = 0;
}

for (i = 0; i < numberOfDots; i++){
the_dots[i].top = ry + 70 * Math.cos(step1 + i * ev * pi) * Math.sin(step1/2) + scy + pix;
the_dots[i].left = rx + 70 * Math.sin(step1 + i * ev * pi) * Math.cos(1+step1/2) + scx + pix;
}

setTimeout(DoItAll,setTimeOutSpeed);
}

function init(){
for (i = 0; i < numberOfDots; i++){
the_dots[i] = document.getElementById("dvs"+(idx+i)).style;
}
winSize();
DoItAll();
}

if (window.addEventListener){
window.addEventListener("resize",winSize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winSize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}

})();
}//End.


Como colocar o código na página

1. Usar o arquivo pretty.js:

a. Criar o arquivo pretty.js com o seguinte conteúdo:
(criar como pretty.txt e renomear para js)

ou

b. Copiar o arquivo pretty comprimido (zip) clicando aqui. Descompactá-lo e deixar o arquivo js resultante com os outros arquivos que compõem a página

Em 1a ou 1b, colocar no código da página, em qualquer ponto entre <body> e </body>:

<script type="text/javascript" src="pretty.js"></script>

ou

2. Copiar o código acima diretamente na página, em qualquer ponto entre <body> e </body>.

Particularidades

Nota: as cores e o número e a velocidade dos pontos poderão ser escolhidas e alteradas nessa parte do script:

As cores (colours) e o número (number) e a velocidade (speed) dos pontos (dots) poderão ser escolhidas e alteradas nessa parte do script:

var colours = new Array("#ff0000","#00ff00"); //Add as many colours as you like! ... em que #FF0000 =, vermelho, e #00FF00 = verde,

var numberOfDots = 14;
var setTimeOutSpeed = 40; //Timeout speed!
var followMouseSpeed = 0.03; //Must be less than 1 & greater than 0!
var twistAndSpinSpeed = 0.04;

Nota: Poderão ser adicionadas mais cores.


Veja detalhes sobre cores e HTML aqui



Exemplo: Olha o teu jardim e o teu coração

Exemplo com cores alteradas: Caixinha de surpresas

Esse script foi recebido por e-mail ou gravado a partir de sites visitados.
Desconheço a existência de quaisquer restrições ao seu uso não comercial.
Caso tenha registro, solicito ao detentor entrar em contato.

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?


Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

 http://www.cultura.ufpa.br/dicas/htm/htm-scri8.htm


Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 26 mai 2008