jquery+css3 réalise l'interaction entre la souris et le formulaire

Cette fois, je vous apporterai jquery+css3 pour réaliser l'interaction entre la souris et le formulaire, et jquery+css3 pour réaliser l'interaction entre la souris et le formulaire. Quels sont les . précautions Ce qui suit est un cas pratique Levez-vous et jetez un œil.

Les rendus sont présentés ci-dessous :

Aperçu en ligne Téléchargement du code source

Code html :

<p class="buttonCollection">
 <p class="qutton" id="qutton_upload">
  <p class="qutton_dialog" id="uploadDialog">
  <h2>上传</h2>
  <p class="urlField">
   <input type="text" id="fileUrl" placeholder="文件地址" />
  </p>
  <p id="button_basic_upload">选择文件</p>
  </p>
 </p>
 <p class="qutton" id="qutton_delete">
  <p class="qutton_dialog" id="deleteDialog">
  <h2>确定？</h2>
  <p id="button_basic_confirm_delete">确定删除</p>
  </p>
 </p>
 <p class="qutton" id="qutton_comment">
  <p class="qutton_dialog" id="commentDialog">
  <textarea name="comment" id="commentInput" placeholder="你的评论..."></textarea>
  <p id="button_basic_submit_comment">发送</p>
  </p>
 </p>
 </p>

code js :

$(function () {
  var quttonUpload = Qutton.getInstance($('#qutton_upload'));
  quttonUpload.init({
  icon: 'images/icon_upload.png',
  backgroundColor: '#917466'
  });
  var quttonDelete = Qutton.getInstance($('#qutton_delete'));
  quttonDelete.init({
  icon: 'images/icon_delete.png',
  backgroundColor: "#eb1220"
  });
  var quttonComment = Qutton.getInstance($('#qutton_comment'));
  quttonComment.init({
  icon: 'images/icon_comment.png',
  backgroundColor: "#41aaf1"
  });
 });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery crée un effet de carrousel d'images réactif

jQuery implémente une collection d'effets spéciaux pour les boutons de texte sous formulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!