Circle响应鼠标的环绕动画效果,基于jQuery插件

发布时间：2018-08-17 19:11:14 所属栏目：交互来源：站长网

导读：Circle响应鼠标的环绕动画效果，基于 jQuery 插件，Google+的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。希望高手们能帮助分析一下。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别

　　Circle响应鼠标的环绕动画效果，基于jQuery插件，Google+的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。希望高手们能帮助分析一下。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <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="/uploads/common/js/jquery-1.4.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"> // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ $(".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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：92站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

避免最常见的物联网问	云×5G，百业开放中国
2022翼支付产业合作政	自动驾驶汽车将怎样重