脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery动画效果circle

jQuery实现动画效果circle实例

 更新时间：2015年08月06日 17:54:01   作者：皮蛋  
这篇文章主要介绍了jQuery实现动画效果circle的方法,涉及jquery鼠标事件及页面动画操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • jQuery实现自动输入email、时间和域名的方法

    jQuery实现自动输入email、时间和域名的方法

    这篇文章主要介绍了jQuery实现自动输入email、时间和域名的方法,涉及jQuery表单操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • jQuery使用bind动态绑定事件无效的处理方法

    jQuery使用bind动态绑定事件无效的处理方法

    今天小编就为大家分享一篇关于jQuery使用bind动态绑定事件无效的处理方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2018-12-12
  • jQuery实现渐变下拉菜单的简单方法

    jQuery实现渐变下拉菜单的简单方法

    这篇文章主要介绍了jQuery实现渐变下拉菜单的简单方法,涉及jQuery链式操作及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery获取file表单选择文件的路径、名字、大小、类型

    jquery获取file表单选择文件的路径、名字、大小、类型

    今天小编就为大家分享一篇关于jquery获取file表单选择文件的路径、名字、大小、类型，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JQuery页面随滚动条动态加载效果的简单实现(推荐)

    JQuery页面随滚动条动态加载效果的简单实现(推荐)

    下面小编就为大家带来一篇JQuery页面随滚动条动态加载效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JQuery 入门实例1

    JQuery 入门实例1

    JQuery 入门实例 大家可以参考下。
    2009-06-06
  • jQuery实现数秒后自动提交form的方法

    jQuery实现数秒后自动提交form的方法

    这篇文章主要介绍了jQuery实现数秒后自动提交form的方法,实例分析了jQuery实现form表单延时提交的技巧,需要的朋友可以参考下
    2015-03-03
  • JS自动缩小超出大小的图片

    JS自动缩小超出大小的图片

    在文章的正文中，往往会出现一些超大的图片，把页面撑开变形，影响了美观。用这段JS代码就可解决这个问题，你可以把图片的最大值限定在一定范围内，当图片大小超出这个尺寸后，就会被自动按比例缩小
    2012-10-10
  • 基于jQuery的js分页代码

    基于jQuery的js分页代码

    jquery的分页代码，是结合数据库实现的， 这里只给出核心jquery代码。其它的大家可以发挥下。
    2010-06-06
  • JQuery中queue方法用法示例

    JQuery中queue方法用法示例

    这篇文章主要介绍了JQuery中queue方法用法,结合实例形式分析了queue方法操作函数队列相关技巧与注意事项,需要的朋友可以参考下
    2019-01-01

最新评论