CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:43:03

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 966 membres
20 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 044 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AJOUTEZ UNE ANIMATION À VOTRE PAGE WEB

Information sur la source

Catégorie :Trucs Amusants Classé sous : animation, yeux, effetyeux, javascript Niveau : Débutant Date de création : 20/04/2007 Vu / téléchargé: 11 725 / 1 440

Auteur : zaydan

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :
Aucune note

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

Description

ce code présente des yeux qui suivent le pointeur souris, c'est très banal...

Source

//Following Eyes - http://www.btinternet.com/~kurt.grigg/javascript
/*
Paste this js-link between the <body> </body> tags of your page HTML.
<script type="text/javascript" src="followingeyes.js"></script>
Make sure that followingeyes.js, pupils.gif and eye.gif are in/uploaded
to the same directory/folder as the web page using the script.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Following Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body{
background:#ffffff;
}
//-->
</style>
</head>
<body>
<script type="text/javascript">
//Following Eyes - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var idx = document.images.length;
if ( document.getElementById("pic"+idx) ||
document.getElementById("ppl1"+idx) ||
document.getElementById("ppl2"+idx)) idx++;
document.write('<img id="eyblls'+idx+'" src="'+e_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>');
var h,w,r,eyeballs,pupil1,pupil2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - msy;
mx = e.pageX;
}
else{
my = e.clientY - msy;
mx = e.clientX;
}
}
function makefollow(){
var sy = scrl(0);
var sx = scrl(1);
//Keep eyes on screen.
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
//eyeball1 centre.
var c1y = chy+17;
var c1x = chx+17;
//eyeball2 centre.
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
eyeballs.top = chy+sy+pix;
eyeballs.left = chx+sx+pix;
pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function move(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
makefollow();
setTimeout(move,30);
}
function init(){
eyeballs = document.getElementById("eyblls"+idx).style;
pupil1 = document.getElementById("ppl1"+idx).style;
pupil2 = document.getElementById("ppl2"+idx).style;
winsize();
move();
}
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.
</script>
</body>
</html>

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

/*
Paste this js-link between the <body> </body> tags of your page HTML.

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


Make sure that followingeyes.js, pupils.gif and eye.gif are in/uploaded 
to the same directory/folder as the web page using the script.

*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Following Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
body{
background:#ffffff;
}
//-->
</style>

</head>
<body>


<script type="text/javascript">
//Following Eyes - http://www.btinternet.com/~kurt.grigg/javascript

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

(function(){

var e_img = new Image();
e_img.src = "eye.gif"; 

var p_img = new Image();
p_img.src = "pupils.gif";

var idx = document.images.length;
if ( document.getElementById("pic"+idx) ||
document.getElementById("ppl1"+idx) ||
document.getElementById("ppl2"+idx)) idx++;

document.write('<img id="eyblls'+idx+'" src="'+e_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>');

var h,w,r,eyeballs,pupil1,pupil2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;

var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");

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


function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView && 
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
 }
 else{
  rh = r.innerHeight;
  rw = r.innerWidth;
 }
h = rh; 
w = rw;
}
else{
h = r.clientHeight; 
w = r.clientWidth;
}
}


function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}


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


function makefollow(){

var sy = scrl(0);
var sx = scrl(1);

//Keep eyes on screen.
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;

var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;

//eyeball1 centre.
var c1y = chy+17;
var c1x = chx+17;

//eyeball2 centre.
var c2y = chy+17;
var c2x = chx+52;

var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);

var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);

var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;

var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;

var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;

eyeballs.top = chy+sy+pix;
eyeballs.left = chx+sx+pix;
pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}


function move(){
 dy = fy += (my-fy) * 0.05;
 dx = fx += (mx-fx) * 0.05;
 makefollow();
 setTimeout(move,30);
}


function init(){
eyeballs = document.getElementById("eyblls"+idx).style;
pupil1 = document.getElementById("ppl1"+idx).style;
pupil2 = document.getElementById("ppl2"+idx).style;
winsize();
move();
}


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.
</script>

</body>
</html>

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

example.html 532 octets
eye.gif 584 octets
followingeyes.js 4 079 octets
instructions.txt 312 octets
pupils.gif 130 octets

Télécharger le zip

Sources de la même categorie

ENIGMES, CASSE-TÊTES À RÉSOUDRE par Bul3

ROTATION DES ÉLÉMENTS D'UN PAGE WEB par yoyo17560

GENERATEUR DE PSEUDO MSN (ART-ASCII) par amrounix

[JEAN] JAVASCRIPT EXÉCUTÉ AVEC LA RÉPONSE D'AJAX, NASALODIGI... par bultez

LIST.ML D'OCAML EN JAVASCRIPT par coucou747

Toutes les sources de la catégorie Trucs Amusants

Sources en rapport avec celle ci

CALCULS RAYNAUX V2 par Ali Bibi

BILLARD EN JAVASCRIPT C'EST POSSIBLE ! par amrounix

SCROLLER HORIZONTAL ++ EN JAVASCRIPT par miika

ANIMATION DE TEXTES par abdelaziz_info

ANIMATION EN JAVA SCRIPT par abdelaziz_info

Commentaires et avis

Commentaire de econs le 20/04/2007 18:20:37 administrateur CS

Salut,

L'effet est vraiment sympa sous IE ... Sous Firefox, c'est un peu ... comment dire ... inopérant. :o)
Penses à mettre les commentaires en français. C'est dommage pour un site francophone !

Commentaire de kankrelune le 23/04/2007 01:13:43

Oui sauf qu'à première vue cette source n'est pas de Zaydan... sans parler du respect de la propriété intellectuelle du code quel intérêt de poster les sources des autres si ce n'est de profiter du programme code sources/google adsense... après si ce code est vraiment de toi zaydan je retire ce que j'ai dis mais dans le cas contraire c'est du foutage de gueule... .. .

@ tchaOo°

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

appeller une script [ par poitierjohan ] Bonjour,Est-il possible d'appeller un script (écrit en JavaScript) qui est en dehors de ma page hmtl??Autrement dis, que ma page web dans la Eliminer Un DIV ??? [ par jzeel ] Bonjour à tous,J'ai une animation flash qui se trouve dans un div, mais dès que l'animation se termine je vais appler un javascript à partir du flash Javascript et animation flash !? [ par cewac ] Bonjour à tous, Pour commencer je dois vous dire que je suis novice en javascript et donc soyez indulgeant face à mon ignorance. Voici mon&n javascript et formulaire [ par CHABRY ] Bonjour, je me demande comment puis-je déterminer un par un les noms de chapms de saisie d'un formulaire car je pense construire un fichier .js qui s Précharger animation & images [ par onesky ] Bonsoir a tous! Je cherche depuis quelque jours comment fair pour précharger un site avec des animation flash et des images. Enfaite j'aimerais q Javascript et rrdtool [ par gaston_gaston ] Bonjour,J'ai une page html où je voudrais créer un boutons qui permet d'afficher un graphe (en utilisant rrdtool). (le graphe n'est aff Vacances :et si j'allais en Javascript ou en php? [ par durand2504 ] Bonjour à tous, je veux créer un site web pour une asso avec quelques fonctionnalité qui feront qu'il ne peux être juste en HTML. problèmes d'impression [ par billy21121 ] Bonjour a tous, Je voudrais simplement un petit renseignement à propos des impressions en javascript. Est il possible de forcer les propriét Supprimer un espace [ par ansdodou ] Salut je suis débutant en javascript je voudrai savoir s'il existe une intruction en javascript qui permet l'espace à gauche ou à droi Récupéré un tableau php avec Javascript [ par Blacknight91titi ] Bonjours a tous.Voila mon problème.Je créer un tableau php grace au résultat que j'ai obtenu de ma base de donée et j'aimerai tras