jQuery+css3实现Ajax点击后动态删除功能的方法
发布时间:2020-12-14 23:11:30 所属栏目:资源 来源:网络整理
导读:本篇章节讲解jQuery+css3实现Ajax点击后动态删除功能的方法。供大家参考研究。具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方
本篇章节讲解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,d); },easeInQuad: function (x,d) { return c*(t/=d)*t + b; },eaSEOutQuad: function (x,d) { return -c *(t/=d)*(t-2) + b; },easeInOutQuad: function (x,d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; },easeInCubic: function (x,d) { return c*(t/=d)*t*t + b; },eaSEOutCubic: function (x,d) { return c*((t=t/d-1)*t*t + 1) + b; },easeInOutCubic: function (x,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,d) { return c*(t/=d)*t*t*t + b; },eaSEOutQuart: function (x,d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; },easeInOutQuart: function (x,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,d) { return c*(t/=d)*t*t*t*t + b; },eaSEOutQuint: function (x,d) { return c*((t=t/d-1)*t*t*t*t + 1) + b; },easeInOutQuint: function (x,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,d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; },eaSEOutSine: function (x,d) { return c * Math.sin(t/d * (Math.PI/2)) + b; },easeInOutSine: function (x,d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; },easeInExpo: function (x,d) { return (t==0) ? b : c * Math.pow(2,10 * (t/d - 1)) + b; },eaSEOutExpo: function (x,d) { return (t==d) ? b+c : c * (-Math.pow(2,-10 * t/d) + 1) + b; },easeInOutExpo: function (x,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,d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; },eaSEOutCirc: function (x,d) { return c * Math.sqrt(1 - (t=t/d-1)*t) + b; },easeInOutCirc: function (x,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,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,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,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,d,s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; },eaSEOutBack: function (x,s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; },easeInOutBack: function (x,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,d) { return c - jQuery.easing.eaSEOutBounce (x,d-t,d) + b; },eaSEOutBounce: function (x,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,d) { if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,d) * .5 + b; return jQuery.easing.eaSEOutBounce (x,t*2-d,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程序设计有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |