javascript - 动画图表从页面的特定部分开始

Question

我有这个脚本

    var doughnutData = [
            {
                value: 10,
                color:"#444444",
                highlight: "#535353",
                label: "Contrato de Assistência"
            },
            {
                value: 25,
                color: "#707070",
                highlight: "#7F7F7F",
                label: "Assistência Técnica"
            },
            {
                value: 10,
                color: "#CECECE",
                highlight: "#E2E2E2",
                label: "Entrega ao Domicílio"
            },
            {
                value: 55,
                color: "#262626",
                highlight: "#383838",
                label: "Atendimento ao Público"
            }

        ];

        window.onload = function(){
            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
        };

这是一个像这样的动画圆环图 http://codepen.io/IanVS/pen/EaZWyo .

但是动画在页面加载时开始，我想开始页面的特定部分。

Answer 1

对于你想要的东西，我使用了这个库:

https://github.com/customd/jquery-visible

该库检查页面上是否有内容可见，因此您可以等待查看是否有内容可见以启动操作。我确实放了一个计时器，它每隔一段时间检查一次元素是否可见。

在你的情况下，它可能是这样的:

       jQuery(document).ready(function($) {
          var timer = window.setInterval(check_visible, 250);

          function check_visible(){
             var visible = $('#chart-area').visible( "complete" );
             if(visible){
               clearInterval(timer);
               var ctx = document.getElementById("chart-area").getContext("2d");
               window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
             }
          }
      });

我在我的网页上使用了它。您可以查看是否向下滚动。