Question

此功能适用于页面上的许多html元素，只有当您向下滚动页面时，其中一些元素才可见。我希望代码只针对页面上显示的元素执行，这样你就可以在滚动时看到与函数关联的元素的函数运行....类似于滚动显示，但在这种情况下它的类型像滚动执行此代码。感谢任何帮助。

function circle_progess() {

    var divElement = $('div'); //log all div elements

    if (retina()) {

        $(".whiteCircle").knob({
            'min':0,
            'max':100,
            'readOnly': true,
            'width': 240,
            'height': 240,
            'bgColor': 'rgba(255,255,255,0.5)',
            'fgColor': 'rgba(255,255,255,0.9)',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true
        });

        $(".circleStat").css('zoom',0.5);
        $(".whiteCircle").css('zoom',0.999);


    } else {

        $(".whiteCircle").knob({
            'min':0,
            'max':100,
            'readOnly': true,
            'width': 120,
            'height': 120,
            'bgColor': 'rgba(255,255,255,0.5)',
            'fgColor': 'rgba(255,255,255,0.9)',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true
        });

    }



        $(".circleStatsItemBox").each(function() {
  var value = $(this).find(".count > .number").html();
  var unit = $(this).find(".value > .unit").html();
  var percent = $(this).find("input").val() / 100;

  countSpeed = 2300 * percent;
  endValue = value;

  $(this).find(".count > .unit").html(unit);
  $(this).find(".count > .number").countTo({
    from: 0,
    to: endValue,
    speed: countSpeed,
    refreshInterval: 50
  });

  //$(this).find(".count").html(value*percent + unit);
});

}

我希望代码顶部有类似的内容......

if .circleStatsItemBox, .whitecircle are not visible on page then dont run the code.

这是片段中的html ...网页上有很多这些......

<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItemBox yellow">
<div class="header">Levels of Interest</div>
<span class="percent">% Increase</span>
<div class="circleStat"> <input value="11" class="whiteCircle" type="text"> </div>
<div class="footer"><span class="count"> <span class="number">80</span> <span class="unit">Before</span>
</span> <span class="sep"> / </span> <span class="value"> <span class="number">90</span><span class="unit"> During</span></span> </div>
</div>
</div>
<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItemBox green">
<div class="header">Levels of Response</div>
<span class="percent">% Increase</span>
<div class="circleStat"> <input value="0" class="whiteCircle" type="text"> </div>
<div class="footer"> <span class="count"> <span class="number">90</span> <span class="unit">Before</span>
</span> <span class="sep"> / </span> <span class="value"> <span class="number">90</span><span class="unit"> During</span></span> </div>
</div>
</div>
<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItemBox red">
<div class="header">Levels of Initiation</div>
<span class="percent">% Increase</span>
<div class="circleStat"> <input value="4" class="whiteCircle" type="text"> </div>
<div class="footer"><span class="count"> <span class="number">60</span> <span class="unit">Before</span>
</span> <span class="sep"> / </span> <span class="value"> <span class="number">63</span><span class="unit"> During</span></span> </div>
</div>
</div>

在滚动上执行代码/仅显示可见的关联元素

0 个答案: