基于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面向对象之静态与非静态类
Feb 03 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
Ajax基础知识详解
Feb 17 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
js实现计算器功能
Aug 10 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
React优化子组件render的使用
2019/05/12 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python读写文件方法总结
2015/06/09 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
最新教师自我评价分享
2013/11/12 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
致800米运动员广播稿
2014/02/16 职场文书
保护环境建议书100字
2014/05/13 职场文书
体操比赛口号
2014/06/10 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
投标售后服务承诺书
2015/04/29 职场文书
60句有关成长的名言
2019/09/04 职场文书
七年级作文之游记
2019/12/11 职场文书
导游词之河北白洋淀
2020/01/15 职场文书