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

2024-09-01 08:33:04

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jQuery+css3实现Ajax点击后动态删除功能的方法,可实现点击选区后出现选区收缩、滚动消失的效果,涉及jquery结合Ajax与数学运算实时操作页面元素的相关技巧,需要的朋友可以参考下

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

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

运行效果截图如下：

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

具体代码如下：

<!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>