jQuery实现动画效果circle实例

前端技术 2023/09/07 JavaScript

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

本文地址：https://www.stayed.cn/item/19164

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案