基于jQuery+CSS3点击动画弹出表单代码

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码。效果图如下:

在线预览 源码下载

实现的代码。

html代码:

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

js代码:

$(function() {varquttonUpload = Qutton.getInstance($('#qutton_upload'));

quttonUpload.init({

icon:'images/icon_upload.png',

backgroundColor:'#917466'});varquttonDelete = Qutton.getInstance($('#qutton_delete'));

quttonDelete.init({

icon:'images/icon_delete.png',

backgroundColor:"#eb1220"});varquttonComment = Qutton.getInstance($('#qutton_comment'));

quttonComment.init({

icon:'images/icon_comment.png',

backgroundColor:"#41aaf1"});

});

via:http://www.w2bc.com/article/59538

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航