基于jquery css3实现点击动画弹出表单源码特效


Posted in Javascript onAugust 31, 2015

下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单、删除表单、发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效。

效果图展示如下:

基于jquery css3实现点击动画弹出表单源码特效

在线预览    源码下载

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">发送</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"
  });
 });
Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js处理表格对table进行修饰
May 26 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 #Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 #Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 #Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 #Javascript
jquery实现点击变换导航样式的方法
Aug 31 #Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 #Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python hmac模块使用实例解析
2019/12/24 Python
python利用faker库批量生成测试数据
2020/10/15 Python
物流司机岗位职责
2013/12/28 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
有创意的广告词
2014/03/18 职场文书
副董事长岗位职责
2014/04/02 职场文书
工会趣味活动方案
2014/08/18 职场文书
满月酒邀请函
2015/01/30 职场文书
赢在中国观后感
2015/06/02 职场文书
西游降魔篇观后感
2015/06/15 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
JavaScript实现登录窗体
2021/06/22 Javascript
Python学习之包与模块详解
2022/03/19 Python