编程 Javascript

jQuery+css3实现Ajax点击后动态删除功能的方法

Posted in Javascript onAugust 10, 2015

本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法。分享给大家供大家参考。具体如下：

这里使用jquery实现ajax动态删除一个方框，并带有动画缓冲效果，在google plus网站发现的特效，在此献丑模仿了一番，已基本与Google Plusp功能相同，你可在方框中加入一些内容，jquery插件选的版本是1.6.2,更高版本也是可以的。

运行效果截图如下：

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+css3实现Ajax动态点击删除功能</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
  def: 'easeOutQuad',
  swing: function (x, t, b, c, d) {
    return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
  },
  easeInQuad: function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
  },
  easeOutQuad: function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
  },
  easeInOutQuad: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
  },
  easeInCubic: function (x, t, b, c, d) {
    return c*(t/=d)*t*t + b;
  },
  easeOutCubic: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
  },
  easeInOutCubic: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
  },
  easeInQuart: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t + b;
  },
  easeOutQuart: function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
  },
  easeInOutQuart: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
  },
  easeInQuint: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t*t + b;
  },
  easeOutQuint: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
  },
  easeInOutQuint: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
    return c/2*((t-=2)*t*t*t*t + 2) + b;
  },
  easeInSine: function (x, t, b, c, d) {
    return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
  },
  easeOutSine: function (x, t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
  },
  easeInOutSine: function (x, t, b, c, d) {
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
  },
  easeInExpo: function (x, t, b, c, d) {
    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
  },
  easeOutExpo: function (x, t, b, c, d) {
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
  },
  easeInOutExpo: function (x, t, b, c, d) {
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
  },
  easeInCirc: function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
  },
  easeOutCirc: function (x, t, b, c, d) {
    return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
  },
  easeInOutCirc: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
  },
  easeInElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  },
  easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
  },
  easeInOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
  },
  easeInBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*(t/=d)*t*((s+1)*t - s) + b;
  },
  easeOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  },
  easeInOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  },
  easeInBounce: function (x, t, b, c, d) {
    return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
  },
  easeOutBounce: function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
      return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
      return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
      return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
      return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
  },
  easeInOutBounce: function (x, t, b, c, d) {
    if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
    return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
  }
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sqare").click(function()
{
$(this).animate({width:'100px',height:'100px'}, 500, 'linear', function() {
 $(this).addClass('circle-label-rotate'); 
 }).addClass('circle').html('<div class="innertext">Bye</div>').animate({"opacity":"0","margin-left":"510px"},1500,function(){  });
 $(this).slideUp({duration: 'slow',easing: 'easeOutBounce'});
});
});
</script>
<style>
.circle-label-rotate {-webkit-animation-name: rotateThis;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}
@-webkit-keyframes rotateThis {from {-webkit-transform:scale(1) rotate(0deg);}
to{-webkit-transform:scale(1) rotate(360deg);}}
.circle{border-radius: 50px;-moz-border-radius: 50px; -webkit-border-radius: 50px;height:100px;width:100px;background:#dedede;}
.sqare{height:100px;width:500px;border:dashed 1px #000;margin-top:10px;}
.innertext{padding:40px;}
</style>
</head>
<body>
<div> <div height="125px" align='center'> 
</div></div> 
<div style='width:600px;margin:0 auto'>
<h4>请点击虚线方框</h4>
<div class="sqare">
</div>
<div class="sqare">这个方框是可以被删除的
</div>
<div class="sqare">
</div>
<div class="sqare">
</div>
<div class="sqare">
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jQuery+css3实现Ajax点击后动态删除功能的方法

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js实现点击后将文字或图片复制到剪贴板的方法

Aug 04 Javascript

AngularJS页面访问时出现页面闪烁问题的解决

Mar 06 Javascript

浅谈JavaScript的内置对象和浏览器对象

Jun 03 Javascript

微信小程序 radio单选框组件详解及实例代码

Jan 10 Javascript

vue2滚动条加载更多数据实现代码

Jan 10 Javascript

js/jq仿window文件夹框选操作插件

Mar 08 Javascript

Vue单页应用引用单独的样式文件的两种方式

Mar 30 Javascript

vue axios封装及API统一管理的方法

Apr 18 Javascript

vue路由对不同界面进行传参及跳转的总结

Apr 20 Javascript

使用JS监听键盘按下事件（keydown event）

Nov 07 Javascript

Vue使用JSEncrypt实现rsa加密及挂载方法

Feb 07 Javascript

node.js使用stream模块实现自定义流示例

Feb 13 Javascript

js中的内部属性与delete操作符介绍

Aug 10 #Javascript

jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()

Aug 09 #Javascript

javascript中对变量类型的判断方法

Aug 09 #Javascript

jquery仿百度百科底部浮动导航特效

Aug 08 #Javascript

jquery实现页面虚拟键盘特效

Aug 08 #Javascript

Jquery实现顶部弹出框特效

Aug 08 #Javascript

Jquery数字上下滚动动态切换插件

Aug 08 #Javascript

You might like

xajax写的留言本

2006/11/25 PHP

php针对cookie操作的队列操作类实例

2014/12/10 PHP

PHP使用socket发送HTTP请求的方法

2016/02/14 PHP

javascript基本语法分析说明

2008/06/15 Javascript

比较全面的event对像在IE与FF中的区别推荐

2009/09/21 Javascript

从零开始学习jQuery (八) 插播:jQuery实施方案

2011/02/23 Javascript

利用JavaScript实现新闻滚动效果(实例代码)

2013/11/27 Javascript

jquery、js调用iframe父窗口与子窗口元素的方法整理

2014/07/31 Javascript

JavaScript字符串对象slice方法入门实例（用于字符串截取）

2014/10/16 Javascript

javascript中var的重要性分析

2015/02/11 Javascript

详解javascript传统方法实现异步校验

2016/01/22 Javascript

Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

2016/02/02 Javascript

Javascript实现跑马灯效果的简单实例

2016/05/31 Javascript

jquery select2的使用心得(推荐)

2016/12/04 Javascript

原生js实现旋转木马轮播图效果

2017/02/27 Javascript

Vue.js中兄弟组件之间互相传值实例

2017/06/01 Javascript

简单谈谈require模块化jquery和angular的问题

2017/06/23 jQuery

微信小程序使用audio组件播放音乐功能示例【附源码下载】

2017/12/08 Javascript

babel之配置文件.babelrc入门详解

2018/02/22 Javascript

Vue Router的懒加载路径的解决方法

2018/06/21 Javascript

Vue子组件向父组件通信与父组件调用子组件中的方法

2018/06/22 Javascript

vue 属性拦截实现双向绑定的实例代码

2018/10/24 Javascript

js前端面试之同步与异步问题详解

2019/04/03 Javascript

JavaScript实现飞舞的泡泡效果

2020/02/07 Javascript

js实现自定义右键菜单

2020/05/18 Javascript

[05:07]DOTA2英雄梦之声_第14期_暗影恶魔

2014/06/20 DOTA

python实现JAVA源代码从ANSI到UTF-8的批量转换方法

2015/08/10 Python

Python turtle绘画象棋棋盘

2019/08/21 Python

python如何绘制疫情图

2020/09/16 Python

Made in Design英国：设计家具、照明、家庭装饰和花园家具

2019/09/24 全球购物

Linux Interview Questions For software testers

2013/05/17 面试题

给校长的建议书

2014/03/12 职场文书

超市创业计划书

2014/04/24 职场文书

教师党的群众路线教育实践活动剖析材料

2014/10/09 职场文书

python munch库的使用解析

2021/05/25 Python

Linux安装apache服务器的配置过程

2021/11/27 Servers