jQuery实现动画效果circle实例


Posted in Javascript onAugust 06, 2015

本文实例讲述了jQuery实现动画效果circle的方法。分享给大家供大家参考。具体如下:

这款jQuery实现动画效果circle,Google+的圈子特效做的很不错,这里模仿下,时间有限,还有一个动画累积的问题没有解决。当然,是基于 jQuery的,纯JS 还没有这个能力呢。感兴趣的朋友可以加以完善试试。

运行效果截图如下:

jQuery实现动画效果circle实例

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
jQuery动态星级评分效果实现方法
Aug 06 #Javascript
javascript使用输出语句实现网页特效代码
Aug 06 #Javascript
JS实现霓虹灯文字效果的方法
Aug 06 #Javascript
javascript实现网页背景烟花效果的方法
Aug 06 #Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 #Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 #Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 #Javascript
You might like
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python版大富翁源代码分享
2018/11/19 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
面试后的英文感谢信
2014/02/01 职场文书
大学生学习计划书
2014/09/15 职场文书
狮子林导游词
2015/02/03 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python