jQuery+css3实现Ajax点击后动态删除功能的方法
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了jQuery+css3实现Ajax点击后动态删除功能的方法,可实现点击选区后出现选区收缩、滚动消失的效果,涉及jquery结合Ajax与数学运算实时操作页面元素的相关技巧,需要的朋友可以参考下
本文实例讲述了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/2tt + b;
return -c/2 ((--t)(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c(t/=d)tt + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c((t=t/d-1)tt + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2ttt + b;
return c/2((t-=2)tt + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c(t/=d)ttt + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c ((t=t/d-1)ttt - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2tttt + b;
return -c/2 ((t-=2)ttt - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c(t/=d)tttt + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c((t=t/d-1)tttt + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2ttttt + b;
return c/2((t-=2)tttt + 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.PIt/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 - tt) - 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/(2Math.PI) Math.asin (c/a);
return -(aMath.pow(2,10(t-=1)) Math.sin( (td-s)(2Math.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/(2Math.PI) Math.asin (c/a);
return aMath.pow(2,-10t) Math.sin( (td-s)(2Math.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(.31.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2Math.PI) Math.asin (c/a);
if (t < 1) return -.5(aMath.pow(2,10(t-=1)) Math.sin( (td-s)(2Math.PI)/p )) + b;
return aMath.pow(2,-10(t-=1)) Math.sin( (td-s)(2Math.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(tt(((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.5625tt) + 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, t2, 0, c, d) .5 + b;
return jQuery.easing.easeOutBounce (x, t2-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-: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程序设计有所帮助。
上一篇：javascript实现连续赋值
下一篇：js中的内部属性与delete操作符介绍
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程