jQuery Girl
  1. jQuery Girl
  3. Création de plusieurs masques pour une seule image
Intereting Posts
JQuery – Sélectionner par atsortingbut? Tabindex basé sur enter key en obtenant des formulaires ne fonctionnant pas dans Jquery Est-il possible de savoir si un type d’entrée = datetime-local est à moitié rempli? Ajout de liens à un tableau avec jquery jquery datepicker ne soumettra pas à l’intérieur d’une table JQuery peut-il manipuler un document temporaire créé avec DOM? Supprimer les fichiers séquentiels de la division remplis par les utilisateurs du CMS via des éditeurs de texte enrichi Comment trouver le dernier enfant d’un type particulier (table) en utilisant jQuery? cliquez pour remplacer la valeur, shift + cliquez pour append la valeur à l’aide de jquery Quelle est l’équivalent mais plus idiomatique de eval () dans jQuery? Télécharger des images avec un exemple de dialog modal jQuery Obtenir la valeur hexadécimale de la couleur cliquée sur la souris avec jQuery Modification de la largeur des widgets jquery-ui autocomplete individuellement Lecture automatique du diaporama JQuery avec cbpFWSlider inclure des graphiques jquery en pdf

Création de plusieurs masques pour une seule image

J’essaie de créer le scénario suivant, et je suis prêt à utiliser n’importe quelle combinaison de jquery, css et html possible (j’aimerais toutefois ne pas utiliser HTML 5 maintenant, mais je suis disposé à l’examiner si c’est la seule solution).

Je voudrais avoir une grande image UNIQUEMENT visible où les masques reposent dessus. J’ai essayé plusieurs techniques, dont aucune ne fonctionne. Toute suggestion serait très appréciée!

entrez la description de l'image ici

Une méthode simple consiste à définir l’image en tant qu’image d’ background-image sur les “fenêtres”, qui sont absolument positionnées dans #maskContainer . top et à left sont définis et la background-position est définie pour correspondre.

Voir: http://jsfiddle.net/thirtydot/XjCCK/
(voir dans un navigateur WebKit pour que l’animation de la background-position l’ background-position fonctionne; c’est purement pour la démo)

HTML:

CSS : 

 #maskContainer { background: #000; width: 603px; height: 482px; position: relative; overflow: hidden; } .window { background: url(http://soffr.miximages.com/jquery/j9a2T.jpg) no-repeat; position: absolute; } .static { width: 80px; height: 80px; left: 20px; top: 30px; background-position: -20px -30px; }

JavaScript: 

 var maskContainerWidth = $('#maskContainer').width(), maskContainerHeight = $('#maskContainer').height(); setInterval(function() { $('.moving').each(function() { var width = Math.floor(Math.random()*maskContainerWidth), height = Math.floor(Math.random()*maskContainerHeight), left = Math.floor(Math.random()*(maskContainerWidth-width)), top = Math.floor(Math.random()*(maskContainerHeight-height)); $(this).animate({ width: width, height: height, left: left, top: top, backgroundPositionX: -left, backgroundPositionY: -top }, 1000); }); }, 1000);

Pourquoi ne pas traiter tout ce qui se trouve autour de vos “masques de masquage” comme un masque (car c’est vraiment ce qu’il est). Utilisez une image avec des trous transparents (où se trouvent vos divs de masquage) ou une grid de divs opaques avec des divs transparents pour vos “divs de masquage). Placez cette image / grid sur l’image d’arrière-plan. Cela devrait vous donner beaucoup fenêtres à l’image de fond.