A voir également:
- Apparition/affichage d'un élément au clic
- Pdf element - Télécharger - PDF
- Atout clic - Télécharger - Éducatifs
- Element introuvable impossible de supprimer - Guide
- Windows 11 clic droit afficher plus d'options par défaut - Guide
- Affichage double ecran - Guide
2 réponses
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
24 nov. 2020 à 23:08
24 nov. 2020 à 23:08
Bonjour,
Déjà, tu mélanges deux langages ... le JAVA n'est pas JAVASCRIPT.
Visiblement toi, tu codes en Javascript (avec Jquery).
Ensuite, sans voir ton code, impossible de te venir en aide.
NB: Pour poster ton code, merci d'utiliser les balises de code.
Explications ( à lire ENTIEREMENT... ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Déjà, tu mélanges deux langages ... le JAVA n'est pas JAVASCRIPT.
Visiblement toi, tu codes en Javascript (avec Jquery).
Ensuite, sans voir ton code, impossible de te venir en aide.
NB: Pour poster ton code, merci d'utiliser les balises de code.
Explications ( à lire ENTIEREMENT... ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ha. Je ne savais pas ! Du coup, merci de ta réponse.
Voici mon code HTML :
Voici mon code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title> Ne pas toucher </title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/main.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="eye">
<div class="muqueuse">
</div>
<div class="paupiere">
<span></span>
</div>
<div class="ball">
<div class="refletoeil">
</div>
</div>
</div>
</div>
</body>
</html>
Voici mon CSS :
body{
margin: 0;
padding: 0;
background: #333;
}
.eye{
width: 350px;
height: 380px;
background: white;
border: 10px solid #F2D3A0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(43deg);
border-radius: 85% 0;
position: absolute;
overflow: hidden;
cursor : pointer;
}
.muqueuse {
width: 10px;
height: 10px;
background: #FE82C2;
border: 10px solid #FE82C2;
border-radius: 10%;
position: absolute;
top: 92%;
}
.ball{
width: 50%;
height: 180px;
background: #222f3e;
border: 10px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, 50%);
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #000000 10%, #643D12 30%, #000000 100%);
}
.refletoeil {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
top: 35%;
left: 15%;
background: rgba(255, 255, 255, 0.2);
}
.paupiere{
width: 300px;
height: 400px;
position: absolute;
top: 65%;
left: 10%;
transform: translate(-50%,-50%) rotate(-45deg);
z-index: 999;
}
.paupiere span{
display: block;
width: 200%;
height: 30%;
background: #ECCCA3;
border-radius: 0 0 60% 60%;
transition: 0.4s all;
}
.eye:hover > .paupiere span{
height: 100%;
}
Et mon Javascript :
let balls = document.getElementsByClassName("ball");
document.onmousemove = function (){
let x = event.clientX * 100 / window.innerWidth + "%";
let y = event.clientY * 100 / window.innerHeight + "%";
for (let i = 0; i < 2; i++) {
balls[i].style.left = x;
balls[i].style.top = y;
balls[i].style.transform = "translate(-" + x + ",-" + y + ")";
}
console.log("x =" + x);
console.log("y = " + y);
}
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
>
soson94
24 nov. 2020 à 23:44
24 nov. 2020 à 23:44
Je n'ai pas regardé le reste, mais déjà je vois un souci...
Tu as chargé deux versions de jquery dans ta page...
garde le dernier uniquement query-3.1.0.min.js (que tu as téléchargé sur ton site )
Sinon, si tu veux utiliser le cdn, tu peux utiliser
Tu as chargé deux versions de jquery dans ta page...
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
garde le dernier uniquement query-3.1.0.min.js (que tu as téléchargé sur ton site )
Sinon, si tu veux utiliser le cdn, tu peux utiliser
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
soson94
>
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
24 nov. 2020 à 23:51
24 nov. 2020 à 23:51
Merci beaucoup, vraiment ! J'ai réctifié.
