Home > Web Front-end > JS Tutorial > body text

Realize click animation pop-up form source code special effects based on jquery css3_jquery

WBOY
Release: 2016-05-16 15:41:27
Original
1421 people have browsed it

The picture below shows you the click animation pop-up form source code implemented using jquery css. There are upload forms, delete forms, and send comment forms. They are all form source code special effects that pop up by clicking the icon button animation with the mouse.

The renderings are shown below:

Online preview Source code download

html code:

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

js code:

$(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"
  });
 });
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template