首頁 > web前端 > js教程 > 基於jquery css3實作點擊動畫彈出表單來源碼特效_jquery

基於jquery css3實作點擊動畫彈出表單來源碼特效_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 15:41:27
原創
1529 人瀏覽過

下圖向大家展示了使用jquery css實現的點擊動畫彈出表單源碼,有上傳表單、刪除表單、發送評論表單,都是透過滑鼠點擊圖示按鈕動畫彈出的表單源碼特效。

效果圖顯示如下:

線上預覽    原始碼下載

html代碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<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>

登入後複製

js程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$(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"

  });

 });

登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板