jQuery实现动画效果circle实例

2019-11-20 11:53:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：Ajax清除浏览器js、css、图片缓存的方法

下一篇：jQuery动态星级评分效果实现方法