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