jQuery實(shí)現(xiàn)動畫效果circle實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)動畫效果circle的方法。分享給大家供大家參考。具體如下:
這款jQuery實(shí)現(xiàn)動畫效果circle,Google+的圈子特效做的很不錯(cuò),這里模仿下,時(shí)間有限,還有一個(gè)動畫累積的問題沒有解決。當(dāng)然,是基于 jQuery的,純JS 還沒有這個(gè)能力呢。感興趣的朋友可以加以完善試試。
運(yùn)行效果截圖如下:
具體代碼如下:
<!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程序設(shè)計(jì)有所幫助。
- jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動畫變化效果
- jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼
- jquery實(shí)現(xiàn)初次打開有動畫效果的網(wǎng)頁TAB切換代碼
- jquery+CSS3模擬Path2.0動畫菜單效果代碼
- jQuery實(shí)現(xiàn)帶有洗牌效果的動畫分頁實(shí)例
- jquery帶動畫效果幻燈片特效代碼
- jquery實(shí)現(xiàn)動畫菜單的左右滾動、漸變及圖形背景滾動等效果
- jquery實(shí)現(xiàn)先淡出再折疊收起的動畫效果
- jQuery實(shí)現(xiàn)徑向動畫菜單效果
- jQuery原生的動畫效果
- jQuery實(shí)現(xiàn)連續(xù)動畫效果實(shí)例分析
相關(guān)文章
jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
在修改數(shù)據(jù)時(shí),有時(shí)候?yàn)榱朔奖悖覀兿M軌蛑苯釉诒砀窭锩鎸?shù)據(jù)進(jìn)行直接修改。2009-08-08jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫過ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery,所以又用jquery重新寫了個(gè),需要的朋友可以參考下2014-06-06jQuery Ajax請求后臺數(shù)據(jù)并在前臺接收
這篇文章主要介紹了jQuery Ajax請求后臺數(shù)據(jù)并在前臺接收的相關(guān)資料,需要的朋友可以參考下2016-12-12純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單,實(shí)際主要是利用了css的li a屬性,對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08jquery利用json實(shí)現(xiàn)頁面之間傳值的實(shí)例解析
本文主要介紹了jquery利用json實(shí)現(xiàn)頁面之間傳值的方法,具有很好的參考價(jià)值,需要的朋友可以看下2016-12-12jQuery ajax方法傳遞中文時(shí)出現(xiàn)中文亂碼的解決方法
這篇文章主要介紹了jQuery ajax方法傳遞中文時(shí)出現(xiàn)中文亂碼的解決方法,涉及jQuery操作ajax的相關(guān)參數(shù)及編碼的設(shè)置方法與注意事項(xiàng),需要的朋友可以參考下2016-07-07