jQuery Girl
  1. jQuery Girl
  3. Effet scanner radar utilisant jquery
Intereting Posts
Désélectionner un groupe de boutons radio à l’aide de jQuery Fancybox: seulement quelques images affichées dans la page mais plus dans la galerie Jquery supprime la ligne tracée ajoutée via la bibliothèque jquery svg jquery ajax formulaire soumet deux fois Méthode programmatique pour voir si le navigateur client prend en charge les méthodes PUT / DELETE Le curseur ne fonctionne que sur la première page (jQM), mais a échoué sur les pages deux, trois et suivantes. jquery .not () ne fonctionne pas AngularJS: Comment changer la propriété de couleur via bascule lorsque la classe css change? Comment puis-je append un minimum de jours en fonction de l’heure dans datetimepicker? Imprimer le contenu de la boîte de dialog jQuery sur une imprimante convertir div en li pour créer un carrousel jQuery Le script d’animation ne fonctionne pas après un appel AJAX Stocker la couleur d’arrière-plan lors du survol d’une ligne de tableau dans jQuery Taille cachée de div (changeant mon conseil) Comment calculer le nombre de jours de la semaine entre les intervalles en utilisant Moment JS?

Effet scanner radar utilisant jquery

J’essaie de trouver une solution possible pour créer un effet de scanner utilisant jquery et css. Essentiellement, un sortingangle semi-transparent pivoterait autour du point central d’un div. Est-ce possible avec jQuery ou devrais-je recourir à un autre moyen? Je préfère ne pas utiliser de gifs animés.

Effet radar css et javascript javery

$(function() { var $rad = $('#rad'), $obj = $('.obj'), deg = 0, rad = $rad.width() / 2; $obj.each(function(){ var pos = $(this).data(), getAtan = Math.atan2(pos.x-rad, pos.y-rad), getDeg = (-getAtan/(Math.PI/180) + 180) | 0; // Read/set positions and store degree $(this).css({left:pos.x, top:pos.y}).attr('data-atDeg', getDeg); }); (function rotate() { $rad.css({transform: 'rotate('+ deg +'deg)'}); // Radar rotation $('[data-atDeg='+deg+']').stop().fadeTo(0,1).fadeTo(1700,0.2); // Animate dot at deg deg = ++deg % 360; // Increment and reset to 0 at 360 setTimeout(rotate, 25); // LOOP })(); }); 
 #radar{ position:relative; overflow:hidden; width:321px; height:321px; background:#222 url(http://i.stack.imgur.com/vY6Tl.png); border-radius: 50%; } #rad{ position:absolute; width:321px; height:321px; background:url(http://i.stack.imgur.com/fbgUD.png); } .obj{ background:#cf5; position:absolute; border-radius: 50%; width:4px; height:4px; margin:-2px; box-shadow:0 0 10px 5px rgba(100,255,0,0.5); opacity:0.2; }

Démonstration uniquement CSS

HTML:

CSS: 

 #radar { position:relative; width:400px; height:400px; margin:20px auto; border:3px solid #0c0; background-color:#020; border-radius:50%; } #radar>* {position:absolute} .beacon { left:50%; top:50%; border-style:solid; border-width:8px 200px 8px 0; border-color:transparent; margin-top:-8px; transform-origin:0 50%; } #beacon {border-right-color:#0c0;animation:spin 2s 0s linear infinite} #beacon-75 {border-right-color:rgba(0,204,0,0.75);animation:spin 2s 0.03s linear infinite} #beacon-50 {border-right-color:rgba(0,204,0,0.5);animation:spin 2s 0.06s linear infinite} #beacon-25 {border-right-color:rgba(0,204,0,0.25);animation:spin 2s 0.09s linear infinite} .circle { left:50%; top:50%; border:1px solid #0c0; border-radius:50%; } #circle-big { width:300px; height:300px; margin:-150px; } #circle-medium { width:200px; height:200px; margin:-100px; } #circle-small { width:100px; height:100px; margin:-50px; } #dot { width:8px; height:8px; margin:-4px; background-color:#0c0; } #vertical { left:50%; top:0; bottom:0; border-left:1px solid #0c0; } #horizontal { top:50%; left:0; right:0; border-top:1px solid #0c0; } @keyframes spin { from {transform:rotate(0)} to {transform:rotate(360deg)} }

Veuillez noter que pour prendre en charge certains navigateurs, vous devez append des préfixes de fournisseur, mais cela seul fonctionne dans IE10 et Firefox.