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 相关文章推荐
js验证是否为数字的总结
Apr 14 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
javascript实现倒计时提示框
Mar 02 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如何将日志写进syslog
2013/06/28 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
个人求职信范文分享
2013/12/13 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
大家访活动实施方案
2014/03/10 职场文书
运动会开幕式主持词
2014/03/28 职场文书
2014年财政局工作总结
2014/12/09 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
mysql查询结果实现多列拼接查询
2022/04/03 MySQL