基于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 相关文章推荐
Jquery 动态生成表格示例代码
Dec 24 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
es6新特性之 class 基本用法解析
May 05 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
php实现插入排序
2015/03/29 PHP
PHP简单遍历对象示例
2016/09/28 PHP
php文件包含的几种方式总结
2019/09/19 PHP
jQuery的one()方法用法实例
2015/01/19 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
详解python logging日志传输
2020/07/01 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
中专生自我鉴定
2013/12/17 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
任命书格式
2014/06/05 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014年政工师工作总结
2014/12/18 职场文书
实名检举信范文
2015/03/02 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
公司周年庆寄语
2019/06/21 职场文书