基于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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 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
PHP生成月历代码
2007/06/14 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python循环语句中else的用法总结
2016/09/11 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
Haggar官网:美国男装品牌
2020/02/16 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
五一服装活动方案
2014/01/11 职场文书
开业主持词
2014/03/21 职场文书
庆六一宣传标语
2014/10/08 职场文书
庆祝国庆节标语
2014/10/09 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
mysql查看表结构的三种方法总结
2022/07/07 MySQL