基于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 字符编码规则
May 04 Javascript
JS跨域代码片段
Aug 30 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
详解vue中localStorage的使用方法
Nov 22 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指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
研究生自荐信
2013/10/09 职场文书
上课说话检讨书大全
2014/01/22 职场文书
文秘求职信范文
2014/04/10 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
先进个人申报材料
2014/12/30 职场文书
亲情作文之母爱
2019/09/25 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript