基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫彈出表單源碼特效
下圖給大家展示了使用jquery css實(shí)現(xiàn)的點(diǎn)擊動(dòng)畫彈出表單源碼,有上傳表單、刪除表單、發(fā)送評(píng)論表單,都是通過鼠標(biāo)點(diǎn)擊圖標(biāo)按鈕動(dòng)畫彈出的表單源碼特效。
效果圖展示如下:
html代碼:
<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="你的評(píng)論..."></textarea> <div id="button_basic_submit_comment">發(fā)送</div> </div> </div> </div>
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" }); });
- jQuery動(dòng)畫與特效詳解
- JQuery 動(dòng)畫卷頁 返回頂部 動(dòng)畫特效(兼容Chrome)
- jQuery動(dòng)畫效果圖片輪播特效
- 基于jquery和svg實(shí)現(xiàn)超炫酷的動(dòng)畫特效
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示動(dòng)畫邊框特效
- jQuery圖片切換動(dòng)畫特效
- jQuery+jRange實(shí)現(xiàn)滑動(dòng)選取數(shù)值范圍特效
- JQuery實(shí)現(xiàn)簡(jiǎn)單的圖片滑動(dòng)切換特效
- jquery實(shí)現(xiàn)滑動(dòng)特效代碼
- 基于jQuery制作小圖標(biāo)上下滑動(dòng)特效
- jQuery 常用特效實(shí)例小結(jié)【顯示與隱藏、淡入淡出、滑動(dòng)、動(dòng)畫等】
相關(guān)文章
基于JQuery的一個(gè)簡(jiǎn)單的鼠標(biāo)跟隨提示效果
代碼很簡(jiǎn)單主要是用到了JQuery的三個(gè)事件mouseover,mouseout,mousemove.2010-09-09深入理解JQuery keyUp和keyDown的區(qū)別
這篇文章主要是對(duì)JQuery中keyUp與keyDown的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
這篇文章主要介紹了基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證,需要的朋友可以參考下2014-12-12jquery mobile界面數(shù)據(jù)刷新的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query mobile界面數(shù)據(jù)刷新的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果(附demo源碼下載)
這篇文章主要介紹了HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果,詳細(xì)分析了Quicksand插件的使用及圖片浮動(dòng)顯示的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05