从此代码中删除 Jquery

Remove Jquery from this code

本文关键字：删除 Jquery 代码      更新时间：2023-09-26

嘿，我正在尝试将此视差代码实现到普通 js 中

$(document).ready(function(){
    function draw() {
        requestAnimationFrame(draw);
        // Drawing code goes here
        scrollEvent();
    }
    draw();
});
function scrollEvent(){
    if(!is_touch_device()){
        viewportTop = $(window).scrollTop();
        windowHeight = $(window).height();
        viewportBottom = windowHeight+viewportTop;
        if($(window).width())
        $('[data-parallax="true"]').each(function(){
            distance = viewportTop * $(this).attr('data-speed');
            if($(this).attr('data-direction') === 'up'){ sym = '-'; } else { sym = ''; }
            $(this).css('transform','translate3d(0, ' + sym + distance +'px,0)');
        });
    }
}   
function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

这就是我走了多远 

(function() {
    function draw() {
        requestAnimationFrame(draw);
        // Drawing code goes here
        scrollEvent();
    }
    draw();
})();

 function getElementsByAttribute(attribute, context) {
  var nodeList = (context || document).getElementsByTagName('*');
  var nodeArray = [];
  var iterator = 0;
  var node = null;
  while (node = nodeList[iterator++]) {
    if (node.getAttribute(attribute)) nodeArray.push(node);
  }
  return nodeArray;
}
function scrollEvent(){

        viewportTop = $(window).scrollTop();
        windowHeight = $(window).height();
        viewportBottom = windowHeight+viewportTop;
        els = getElementsByAttribute('data-parallax');
        for (var i = 0; i < els.length; i++) {
            distance = viewportTop * els[i].getAttribute('data-speed');
            if(els[i].getAttribute('data-direction') === 'up'){ sym = '-'; } else { sym = ''; }
            els[i].style.webkitTransform = "translate3d(0, " + sym + distance +"px,0)";
        };

}   
function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

所以基本上我需要替换这两行 

    viewportTop = $(window).scrollTop();
    windowHeight = $(window).height();

还是我错过了？提前致谢

对于窗口的高度 yo 可以使用

窗口高度 = 窗口.内部宽度;

对于滚动顶部，您可以借助此链接

将 Jquery 转换为 Javascript

相关文章：