基于jquery css3實現(xiàn)點擊動畫彈出表單源碼特效
更新時間：2015年08月31日 17:22:32 投稿：mrr
這篇文章主要介紹了基于jquery css3實現(xiàn)點擊動畫彈出表單,彈出的表單沒有任何遮蓋層，在web前端程序開發(fā)中經(jīng)常會用到，需要的朋友可以參考下
下圖給大家展示了使用jquery css實現(xiàn)的點擊動畫彈出表單源碼，有上傳表單、刪除表單、發(fā)送評論表單，都是通過鼠標點擊圖標按鈕動畫彈出的表單源碼特效。
效果圖展示如下：
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="你的評論..."></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"
});
});
相關(guān)文章
這篇文章主要介紹了JQuery給網(wǎng)頁更換皮膚的方法,用到了jQuery頁面元素獲取、樣式及鏈式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JQuery 動態(tài)生成Table表格實例代碼的相關(guān)資料,這里附有實現(xiàn)實例代碼，具有一定的參考價值，需要的朋友可以參考下2016-12-12
EasyUI實現(xiàn)二級頁面的內(nèi)容勾選的方法
在使用EasyUI的時候，我們經(jīng)常回遇到在二級頁面進行勾選的時候，這里給大家分享一個比較簡單實用的實現(xiàn)方法，希望大家能夠喜歡。2015-03-03
在js中動態(tài)改變form的屬性，滿足不同條件的form提交需求，下面有個不錯的示例，大家可以參考下2014-06-06
javascript中對Attr(dom中屬性)的操作示例講解
這篇文章主要是對javascript中對Attr(dom中屬性)的操作進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jQuery 網(wǎng)易相冊鼠標移動顯示隱藏效果實現(xiàn)代碼
顯示隱藏效果的實現(xiàn)主要是jquery層選擇器的應(yīng)用：當鼠標移動經(jīng)過照片就顯示設(shè)為封面刪除，移開后就隱藏，此效果在web開發(fā)中經(jīng)常會用到，感興趣的朋友可以參考下哈2013-03-03
基于jquery的拖動布局插件，需要的朋友可以參考下。2011-11-11
filter() 方法返回符合一定條件的元素。該方法讓您規(guī)定一個條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。這篇文章主要介紹了 jquery的 filter()方法使用,需要的朋友可以參考下2018-03-03
系統(tǒng)默認情況下，使用Tab按鍵切換頁面元素的焦點，有沒有想過回車鍵Enter也可以實現(xiàn)這種功能，并且具有良好的用戶體驗。2010-09-09
在很多網(wǎng)站尤其在一些購物網(wǎng)站上，展示商品的列表頁提供了許多商品，用戶可以選擇商品的展示方式如列表方式展示和櫥窗方式展示等。在本例中，將給您講述如何實現(xiàn)這種效果2011-10-10