基于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 基础篇2 数据类型,语句,函数
Mar 14 Javascript
JSONP之我见
Mar 24 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python实现八大排序算法
2016/08/13 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
干部考核评语
2014/04/29 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
企业安全生产规章制度
2015/08/06 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis