Pointeur laser sur ma page internet
Nicolala67
Messages postés
47
Date d'inscription
Statut
Membre
Dernière intervention
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je cherche à récupérer un curseur animé pour ma page internet.
En java ou en html5, mais pas de flash (ça marche pas partout apparemment)
Il faudrait quelque chose qui ressemble à un curseur qui en cliquant lance un laser sur l'écran.
Le top serait qui laisse une trace sur l'écran le temps de la visite, mais je suis pas difficile si ça ne le fait pas. ;-)
Merci d'avance de vos réponses.
A bientôt
Je cherche à récupérer un curseur animé pour ma page internet.
En java ou en html5, mais pas de flash (ça marche pas partout apparemment)
Il faudrait quelque chose qui ressemble à un curseur qui en cliquant lance un laser sur l'écran.
Le top serait qui laisse une trace sur l'écran le temps de la visite, mais je suis pas difficile si ça ne le fait pas. ;-)
Merci d'avance de vos réponses.
A bientôt
A voir également:
- Pointeur laser sur ma page internet
- Comment supprimer une page sur word - Guide
- Comment traduire une page internet - Guide
- Gps sans internet - Guide
- Imprimer tableau excel sur une page - Guide
- Mon pc rame sur internet - Guide
5 réponses
Voici un gros bout de code, tu peux le tester sous chrome et safari, après à toi de l'adapter. J'espère ne pas être trop loin du résultat escompté.
++
++
<html>
<head>
<title></title>
<style type="text/css">
html, body{
height: 100%;
background-color: #333;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: crosshair;
}
#global{
margin:0 auto;
text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
}
@-webkit-keyframes smoke{
0%{
width: 3px;
height: 3px;
margin-top: 0px;
background-color: #ccc;
box-shadow: 0 0 50px #fff;
opacity: .2;
border-radius: 100px;
}
100%{
margin-top: -300px;
height: 75px;
width: 75px;
opacity: .1;
}
}
@-webkit-keyframes hole{
0%{
opacity: 0;
width: 2px;
height: 2px;
background-color: orange;
}
100%{
opacity:1;
width: 5px;
height: 5px;
background-color: #111;
}
}
.hole{
position: absolute;
width: 5px;
height: 5px;
border-radius: 10px;
/*background: url('hole.png') no-repeat;*/
background-color: #111;
z-index: 1000;
opacity: 1;
-webkit-animation: hole .3s linear; /* Safari and Chrome */
box-shadow: 0 0 5px #000;
}
.hole .smoke{
position: absolute;
-webkit-animation: smoke 1s linear; /* Safari and Chrome */
}
.laserPointer{
width: 292px;
height: 183px;
background:url('http://image.noelshack.com/fichiers/2013/13/1364254149-laser.png') 0 -183px no-repeat;
position: absolute;
z-index: 999999;
}
.laserPointer.active{
background:url('http://image.noelshack.com/fichiers/2013/13/1364254149-laser.png') 0 0 no-repeat;
}
.center{
width: 960px;
margin:0 auto;
}
.paragraph{
float: left;
width: 100%;
color:white;
}
</style>
</head>
<body>
<div class="laserPointer"></div>
<div id="global">
<div class="center">
<div class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate, sem non mattis mollis, lorem orci venenatis purus, eu hendrerit leo urna id velit. Duis tempus dapibus pharetra. Suspendisse odio orci, rutrum sed venenatis non, lobortis ut tellus. Curabitur velit tellus, luctus vel hendrerit sit amet, mattis at massa. Aenean tincidunt facilisis sapien, tempor rutrum ipsum feugiat at. Nam ut nisl ipsum, et dignissim leo. Aenean molestie tincidunt vulputate. Aliquam erat volutpat. Etiam consequat ante nec est porta congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu ligula nisl. Pellentesque eleifend aliquet nibh, ultricies congue mauris semper quis. Etiam rhoncus risus sit amet neque cursus ut ullamcorper elit scelerisque. Duis tristique varius nunc, at molestie tellus mollis a. Nunc sed nunc in metus porttitor ornare.
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var laser = {
timer: null,
mouseDown: false,
_initialize: function(){
var me = this;
this.addEventsListeners();
},
addEventsListeners: function(){
var me = this;
$(window).mousedown(function(e){
me.mouseDown = true;
});
$(window).mouseup(function(){
me.mouseDown = false;
});
$(window).mousemove(function(e){
me.setLaser(e);
});
},
setLaser: function(e){
$('.laserPointer').css('left', e.clientX - 292 + 'px');
$('.laserPointer').css('top', e.clientY+ 'px');
if(this.mouseDown){
$('.laserPointer').addClass('active');
$('#global').append('<div class="hole" style="top:'+(e.clientY - 2)+'px; left: '+(e.clientX - 2)+'px"><div class="smoke"></div></div>');
}else{
$('.laserPointer').removeClass('active');
}
}
}
laser._initialize();
</script>
</html>
Hello,
Je vais tenter de m'y coller, ça peut être marrant. Réponse dans un petit moment, en espérant que tu es toujours à l'écoute.
++
Je vais tenter de m'y coller, ça peut être marrant. Réponse dans un petit moment, en espérant que tu es toujours à l'écoute.
++
Désolé mais je n'ai pas relever mes mails depuis quelques jours et la fois dire oh p... J'ai pas l'habitude de dire des gros mots mais la cest la classe!
Merci
je teste
Merci
je teste
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je ne pensais pas que c'était possible.
J'espère que Nicolala est toujours à l'écoute ^^