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实现HTML表格单元格的合并功能,可合并指定行与指定列上的单元格,涉及jQuery针对表格元素属性的动态操作技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了JQuery动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，接下来为大家详细介绍下jQuery选择器，感兴趣的朋友可以参考下哈2013-04-04
前面我们讲述了jQuery中ajax的load（）方法，小伙伴们反应非常好，今天我们就来讲解下jQuery中Ajax的get、post等方法，希望大家同样能够喜欢。2015-01-01
Jquery 一次处理多个ajax请求的代码，需要的朋友可以参考下。2011-09-09
升级了IE10，发现flexigrid无法显示数据，提示获取到了数据，但没任何报错任何显示,经过试验和跟踪，修改如下，有类似问题的朋友可以参考下哈2013-07-07
这篇文章主要介绍了jQuery实现简单的计时器功能,结合实例形式分析了jQuery实现倒计时60秒的具体操作技巧与相关注意事项,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了jQuery中$原理,结合实例形式分析了jQuery中$的原理与运行机制,并具体分析了jQuery对象构造的具体原理,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了jQuery中each和js中forEach的区别,结合实例形式较为详细的分析了jQuery中each和js中forEach针对数组与对象遍历的相关操作技巧与注意事项,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了JQuery仿小米手机抢购页面倒计时效果，从功能到实现原理以及主要代码都做了详细的介绍，推荐给有相同需求的小伙伴。2014-12-12
最新评论