滚动效果

时间:2018-11-26 22:50:54

标签: javascript jquery html

我搜索了答案,但对我来说真的没有任何用处,因此,我将在此处发布我的问题(对新手错误表示抱歉)。

我需要在向下滚动时触发键入效果,在向上滚动时会向后运行

// typing text
var _CONTENT = ["Test...test....test....test....test.....test"];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() {
  // Get substring with 1 characater added
  var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX++;
}

// Implements deleting effect
function Delete() {
  // Get substring with 1 characater deleted
  var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX--;
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="text"></div>
  <div id="cursor"></div>
</div>

上面我找到了一个打字效果的例子,我可以根据自己的需要进行调整,并且效果很好。 然后,我尝试环绕滚动功能(如上所述,我留下了其他代码),但没有结果。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      function Type() {
        // Get substring with 1 characater added
        var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
        _ELEMENT.innerHTML = text;
        _PART_INDEX++;
      }
    } else {
      function Delete() {
        // Get substring with 1 characater deleted
        var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
        _ELEMENT.innerHTML = text;
        _PART_INDEX--;
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="text"></div>
  <div id="cursor"></div>
</div>

谁能告诉我我的错误在哪里?非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您的向上/向下滚动检测可能无法正常工作。这样做可以让您准确地检测方向:

var _top = $(window).scrollTop();
$(window).scroll(function(){
    var _cur_top = $(window).scrollTop();
    if(_top < _cur_top)
    {
        Type();
    }
    else
    {
        Delete();
    }
    _top = _cur_top;    
});

您可以将其与其他代码放在同一脚本块中,而只需调用Type()或Delete()即可,而不必在滚动功能内重新定义这些方法。