jQuery实现动画效果圆实例

本文实例讲述了jQuery实现动画效果圆的方法。分享给大家供大家参考。具体如下：

这款jQuery实现动画效果圈，谷歌的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。当然，是基于jQuery的，纯射流研究…还没有这个能力呢。感兴趣的朋友可以加以完善试试。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title jquery动画效果圆形/标题样式正文{ width :200 pxmargin 33600 auto margin-top :100 px；背景# CCC} #登录{ position:relative}。圆圈_l .圆形_ b {宽度：148px高度：148 px边界半径：80 px背景：蓝色；border:1px固体# FFF；} .circle _ l { width:138px高度：138 px位置：绝对；top:5pxleft:5px}。circle _ b {背景：浅蓝色；}/style脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script/head body div id=' log in ' div class=' circle _ b ' div class=' circle _ l '/div/div script type=' text/JavaScript ' $(').圆圈_ b’.悬停(function(){ $(this)).停止()。动画({宽度：188，高度：188，边距：'-20 '，边距：'-20'}，500).CSS({ '边框半径' : ' 150 px ' })；$('.圆圈_ l ').停止()。动画({marginTop:'20'}，500) }，函数(){ $(this).停止()。动画({宽度：148,高度：148,边距：'0 ',边距：'0'},500)。CSS({ ' border-radius ' : ' 100px ' })；$('.圆圈_ l ').停止()。动画({marginTop:'0'}，500)})/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。