本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
