jQuery实现动画效果circle实例

本文实例讲述了jQuery实现动画效果circle的方法。分享给大家供大家参考。具体如下：
这款jQuery实现动画效果circle，Google+的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。当然，是基于 jQuery的，纯JS 还没有这个能力呢。感兴趣的朋友可以加以完善试试。
运行效果截图如下：

具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery 动画效果 circle</title> <style> body {width:200px;margin:0 auto;margin-top:100px;background:#CCC;}#login{position:relative;}.circle_l, .circle_b {width:148px;height:148px;border-radius:80px;background:blue;border:1px solid #FFF;}.circle_l {width:138px;height:138px;position:absolute;top:5px;left:5px;}.circle_b {background:lightblue;}</style><script src="jquery-1.6.2.min.js" type="text/javascript"></script></head> <body><div id="login"><div class="circle_b"><div class="circle_l"></div></div></div><script type="text/javascript"> $（".circle_b"）.hover（function（）{$（this）.stop（）.animate（{width:188,height:188,marginTop:"-20",marginLeft:"-20"},500）.css（{"border-radius":"150px"}）;$（".circle_l"）.stop（）.animate（{marginTop:"20"},500）},function（）{$（this）.stop（）.animate（{width:148,height:148,marginTop:"0",marginLeft:"0"},500）.css（{"border-radius":"100px"}）;$（".circle_l"）.stop（）.animate（{marginTop:"0"},500）}）</script></body></html>

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