【问题标题】:Jquery animated arc / circle drawing in IE 9IE 9 中的 Jquery 动画圆弧/圆绘图
【发布时间】:2015-01-23 23:19:20
【问题描述】:

我正在尝试找到一种仅使用 jquery 为圆弧/圆设置动画的解决方案 - 没有 HTML5 或 CSS3,因为这需要在 IE 9 中工作。

我找到了几个 jquery 插件,但没有一个在 IE 9 中工作。

http://blog.templatemonster.com/demos/how-to-build-jquery-animated-circle-statistics/demo/index.html

http://www.jqueryscript.net/demo/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress/

有没有办法只使用 jquery 为弧设置动画?

【问题讨论】:

    标签: javascript jquery css internet-explorer


    【解决方案1】:

    您正在寻找这样的东西吗? Here is the JS.Fiddle

    JQuery:

     $(function() {
      $(".circle1").mouseover(function() {
        $(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 1}, 200);
      }).mouseout(function() {
        $(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
      });
    });
    

    CSS:

    .circle1 {
        position:absolute; top:50px; left:50px;
        width: 0px; height: 0px;
        border:1px solid red;
        padding:20px;
        border-radius:50%;
    }
    

    HTML:

    <div class="circle1"></div>
    

    希望对您有所帮助。

    【讨论】:

    • 如果你看我原帖中的两个链接,只要你不使用IE,你就会明白我在做什么。我想为圆弧制作动画,从 0 度圆到可变数字。
    【解决方案2】:

    这里的动画圆圈示例

    http://kottenator.github.io/jquery-circle-progress/

    看起来效果不错。

    我在 IE9 和 firefox、chrome 和 safari 中测试过,看起来不错。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多