A voir également:
- Apparition/affichage d'un élément au clic
- Clic molette ne fonctionne plus ✓ - Forum souris / Touchpad
- Inspecter l'élément safari ✓ - Forum MacOS
- Pdf element - Télécharger - PDF
- Impossible de copier car cet élément est trop volumineux pour le format du volume - Forum MacOS
- Auto clic - Télécharger - Divers Utilitaires
2 réponses
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
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
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
>
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
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
24 nov. 2020 à 23:51
24 nov. 2020 à 23:51
Merci beaucoup, vraiment ! J'ai réctifié.