Question

好吧，我正在寻找网页的解决方案。我有一个增加文本编号的功能，但我需要该功能从查看该部分开始。这是功能，并且工作正常：

jQuery(document).ready(function ($) {  
    $("#chartdiv").one("inview", function(event, isInView)
        {                   
        if (isInView) 
        {
            alert("calling function");
            $.fn.numbers();
        }
    });

          /*INCREASE TEXT NUMBER*/
          $.fn.numbers = function() { 
          //$(function numbers() {
            var initialDate = new Date(2013, 06, 1);
            var now = Date.now();
            var difference = now - initialDate;
            var millisecondsPerDay = 24 * 60 * 60 * 1000;
            var daysSince = Math.floor(difference / millisecondsPerDay);
            var daysSongs = Math.floor(difference / millisecondsPerDay);
            daysSince = (daysSince * 3);
            daysSongs= (daysSongs * 12);


            //INCREASE FUNCTION
            $({someValue: 0}).animate({someValue: daysSince}, {
               duration: 3000,
               easing:'swing', // can be anything
               step: function() { // called on every step --DO NOT EXECUTE ???
                // Update the element's text with rounded-up value:

                $('#days_since').text(commaSeparateNumber(Math.round(this.someValue)));
               }
            });


            $({someValue: 0}).animate({someValue: daysSongs}, {
               duration: 3000,
               easing:'swing', // can be anything
               step: function() { // called on every step
               // Update the element's text with rounded-up value:
               $('#days_songs').text(commaSeparateNumber(Math.round(this.someValue)));
               }
             });

            };
            /**/
        });         


          //ADD COMMAS  
          function commaSeparateNumber(val){
            while (/(\d+)(\d{3})/.test(val.toString()))
            {
            val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
            }
            return val;
            }

使用JQuery INVIEW，但增加功能不是TRIGGERED

Answer 1

从我写的插件中删除了这个：

var $watched = $('#feed-link-text a');

var doWhenSeen = function () {
    $watched.html('<span class="feed-icon"></span>Why hello there!!')
};

var checkVisible = function (elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}


var visibleCheckInterval = window.setInterval( function () {
    if ( checkVisible( $watched[0]) )
        doWhenSeen();
}, 250);

要查看此工作，滚动到此SO页面的顶部，将上面的代码粘贴到控制台中，然后向下滚动到RSS提要链接（如果这是几个月之后，它会显示错误，只需将$ watched的css选择器替换为此页面上的元素即可。）

Answer 2

试试这个：

if  ( $(element).is(":visible") ) { do something }

或另外一个解决方案：

    $.fn.visible = function(partial) {
        var $t        = $(this),
            $w            = $(window),
            viewTop       = $w.scrollTop(),
            viewBottom    = viewTop + $w.height() + 100,
            _top          = $t.offset().top,
            _bottom       = _top + $t.height(),
            compareTop    = partial === true ? _bottom : _top,
            compareBottom = partial === true ? _top : _bottom;
        return (viewBottom > compareBottom);
    };

if (el.visible(true)) { do something ...

在div视图上执行JQuery Function

2 个答案: