jQuery Girl
  1. jQuery Girl
  3. Comment append un filtre d’image basé sur la valeur d’entrée de la plage?
Intereting Posts
L’exception JS est toujours capable de se faufiler, mais très rarement, pas sûr de savoir pourquoi Comment obtenir la diapositive visible actuelle dans un site de défilement vertical à l’aide de jQuery La fenêtre contextuelle de jquery ne se ferme pas lorsque vous appuyez sur une touche Téléchargement de fichier WEBAPI ASP.NET, problèmes avec IE9 Comment append un nombre de semaines à la date du jour en utilisant JavaScript? envoyer un paramètre à un modal puis supprimer une ligne Comment comparer plusieurs td.text () dans tr en utilisant jQuery Comment enregistrer des données de formulaire Spring à l’aide de jquery ajax sans actualiser la page? Firefox – Collecte des données utilisées par LAB.min.js Renvoi de données JSON en dehors de la fonction de rappel Javascript – Correction du système de recherche? Éléments ajoutés dynamics double effet après la transition de page jQuery datepicker s’afficher en bas de la page (datepicker Keith-Wood) Comment recharger un object jquery dropkick jquery on function et document ready

Comment append un filtre d’image basé sur la valeur d’entrée de la plage?

J’ai une entrée de plage destinée à capturer le pourcentage de filtre sépia sur une image affichée. J’ai le code HTML pour l’entrée de la plage elle-même et quelques lignes d’un code javascript destiné à modifier le filtre de l’image. Cependant, le javascript ne fonctionne pas. La voici, des idées ?: HTML: 

 Sepia (0)
  Grayscale (0)

CSS: 

 .wrap img { position:relative; z-index:1; margin: none; top:0%; bottom:0%; vertical-align: bottom; -webkit-filter: none; }

JS: 

 function set(e){ document.getElementById('img_prev').style["webkitFilter"] = "sepia("+e.value+")"; document.getElementById('Amount').innerHTML="("+e.value+")"; } function set(e){ document.getElementById('img_prev').style["webkitFilter"] = "grayscale("+e.value+")"; document.getElementById('Amount2').innerHTML="("+e.value+")"; }

Puisque vous utilisez uniquement le webkit filter je ne l’afficherai que dans la démo, mais vous pouvez append msFilter webkitFilter mozFilter oFilter pour la mozFilter oFilter d’autres navigateurs.

Vous devriez cibler l’ID d’image, pas l’ID de conteneur avec l’ID d’image. 

 function set(e){ // Target the image ID (img_prev) (Filter) document.getElementById('img_prev').style["webkitFilter"] = "sepia("+e.value+")"; document.getElementById('Amount').innerHTML="("+e.value+")"; } 
  Sepia (0)