基于jquery css3实现点击动画弹出表单源码特效

 更新时间:2015年08月31日 17:22:32   投稿:mrr  
这篇文章主要介绍了基于jquery css3实现点击动画弹出表单,弹出的表单没有任何遮盖层,在web前端程序开发中经常会用到,需要的朋友可以参考下

下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单、删除表单、发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效。

效果图展示如下:

在线预览    源码下载

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"
  });
 });

相关文章

  • JQuery给网页更换皮肤的方法

    JQuery给网页更换皮肤的方法

    这篇文章主要介绍了JQuery给网页更换皮肤的方法,用到了jQuery页面元素获取、样式及链式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JQuery 动态生成Table表格实例代码

    JQuery 动态生成Table表格实例代码

    这篇文章主要介绍了JQuery 动态生成Table表格实例代码的相关资料,这里附有实现实例代码,具有一定的参考价值,需要的朋友可以参考下
    2016-12-12
  • EasyUI实现二级页面的内容勾选的方法

    EasyUI实现二级页面的内容勾选的方法

    在使用EasyUI的时候,我们经常回遇到在二级页面进行勾选的时候,这里给大家分享一个比较简单实用的实现方法,希望大家能够喜欢。
    2015-03-03
  • jquery动态改变form属性提交表单

    jquery动态改变form属性提交表单

    在js中动态改变form的属性,满足不同条件的form提交需求,下面有个不错的示例,大家可以参考下
    2014-06-06
  • javascript中对Attr(dom中属性)的操作示例讲解

    javascript中对Attr(dom中属性)的操作示例讲解

    这篇文章主要是对javascript中对Attr(dom中属性)的操作进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jQuery 网易相册鼠标移动显示隐藏效果实现代码

    jQuery 网易相册鼠标移动显示隐藏效果实现代码

    显示隐藏效果的实现主要是jquery层选择器的应用:当鼠标移动经过照片就显示设为封面删除,移开后就隐藏,此效果在web开发中经常会用到,感兴趣的朋友可以参考下哈
    2013-03-03
  • 基于jquery的拖动布局插件

    基于jquery的拖动布局插件

    基于jquery的拖动布局插件,需要的朋友可以参考下。
    2011-11-11
  • jquery的 filter()方法使用教程

    jquery的 filter()方法使用教程

    filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。这篇文章主要介绍了 jquery的 filter()方法使用,需要的朋友可以参考下
    2018-03-03
  • 基于Jquery的实现回车键Enter切换焦点

    基于Jquery的实现回车键Enter切换焦点

    系统默认情况下,使用Tab按键切换页面元素的焦点,有没有想过回车键Enter也可以实现这种功能,并且具有良好的用户体验。
    2010-09-09
  • jQuery实现切换页面布局使用介绍

    jQuery实现切换页面布局使用介绍

    在很多网站尤其在一些购物网站上,展示商品的列表页提供了许多商品,用户可以选择商品的展示方式如列表方式展示和橱窗方式展示等。在本例中,将给您讲述如何实现这种效果
    2011-10-10

最新评论