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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
jquery 上下滚动广告
Jun 17 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
bootstrap css样式之表单
Jan 19 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 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中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
js实现前端图片上传即时预览功能
2017/08/02 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
详解django中使用定时任务的方法
2018/09/27 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python配置文件处理的方法教程
2019/08/29 Python
tensorflow 环境变量设置方式
2020/02/06 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
酒店营销策划方案
2014/02/07 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
安全协议书范本
2014/04/21 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2014年政工师工作总结
2014/12/18 职场文书
mysql如何查询连续记录
2022/05/11 MySQL