运维

当前位置:永利皇宫463登录 > 运维 > jQuery实现动画效果的简单实例_jquery_脚本之家,

jQuery实现动画效果的简单实例_jquery_脚本之家,

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-11-28 21:54

图片 1

 jQuery 动画效果 circle  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; }     $.hover.stop().animate({width:188,height:188,marginTop:"-20",marginLeft:"-20"},500) .css({"border-radius":"150px"}); $.animate },function.animate({width:148,height:148,marginTop:"0",marginLeft:"0"},500) .css({"border-radius":"100px"}); $.animate })

三、运行结果

复制代码 代码如下:

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

一、需求原因目前jQuery已经是一个比较成熟的框架了,而且基于他的插件也有上百种,本例我手动用jQuery实现一个动画效果的例子。

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

二、具体实现复制代码 代码如下:

希望本文所述对大家的jquery程序设计有所帮助。

jQuery实现动画效果

本文由永利皇宫463登录发布于运维,转载请注明出处:jQuery实现动画效果的简单实例_jquery_脚本之家,

关键词: