快捷導(dǎo)航

jQuery實現(xiàn)動畫效果circle實例

更新時間：2015年08月06日 17:54:01 作者：皮蛋

這篇文章主要介紹了jQuery實現(xiàn)動畫效果circle的方法,涉及jquery鼠標事件及頁面動畫操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)動畫效果circle的方法。分享給大家供大家參考。具體如下：

這款jQuery實現(xiàn)動畫效果circle，Google+的圈子特效做的很不錯，這里模仿下，時間有限，還有一個動畫累積的問題沒有解決。當(dāng)然，是基于 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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery控制的不同方向的滑動(向左、向右滑動等)
這篇文章主要介紹了jQuery控制的不同方向的滑動(向左、向右滑動等),需要的朋友可以參考下
2014-07-07
jQuery+HTML5實現(xiàn)手機搖一搖換衣特效
經(jīng)常我們玩微信都會用到查到附近的人，都是在app上實現(xiàn)手機搖一搖的功能?，F(xiàn)在，我們將此技術(shù)搬移到手機web上，供大家學(xué)習(xí)，有需要的小伙伴可以參考下。
2015-06-06
jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn)
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉(zhuǎn)和加載外部頁面的實現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下
2015-12-12
關(guān)于jQuery里prev()的簡單操作代碼
這篇文章主要介紹了jQuery里prev()的簡單操作代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-10-10
jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧
2014-11-11
jquery實現(xiàn)獲取具體時間(年月日)后3個月+1天的年月日
這篇文章主要為大家詳細介紹了jquery如何實現(xiàn)獲取具體時間(年月日)后3個月+1天的年月日,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下
2023-11-11
jQuery 使用手冊(五)
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。
2009-09-09
jquery實現(xiàn)彈出窗口效果的實例代碼
這篇文章主要介紹了jquery實現(xiàn)彈出窗口效果的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
JQuery實現(xiàn)點擊div以外的位置隱藏該div窗口
鼠標點擊div外的地方讓div窗口隱藏消失，實現(xiàn)方法有很多，在本文將為大家介紹下jquery中時如何實現(xiàn)的，感興趣的朋友不要錯過了哈
2013-09-09
jquery中為什么能用$操作
這篇文章主要介紹了jquery中為什么能用$操作，jquery直接用$來獲取dom節(jié)點的方式也非常便捷方便，那么他是怎么實現(xiàn)的呢？,需要的朋友可以參考下
2019-06-06