快捷導(dǎo)航

jQuery實(shí)現(xiàn)動(dòng)畫效果circle實(shí)例

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

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

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

這款jQuery實(shí)現(xiàn)動(dòng)畫效果circle，Google+的圈子特效做的很不錯(cuò)，這里模仿下，時(shí)間有限，還有一個(gè)動(dòng)畫累積的問題沒有解決。當(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 動(dòng)畫效果 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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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