Question

我对jQuery场景很陌生，我偶然发现了一个问题。

当鼠标存在时，我有这个parallaxing网站很好地工作，但无法使其在触摸时工作。我们非常欢迎任何帮助。

注释掉的部分是我之前尝试解决此问题的方法。

var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var scrollSensitivitySetting = 60; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) 
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
var currentSlideNumber = 0;
//var totalSlideNumber = (".background").length;
var totalSlideNumber = 4;

// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //

function parallaxScroll(evt) {
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  //$("#myElement").on("touchstart", function(e) {
  //  var startingY = e.originalEvent.touches[0].pageY;

  //  $("#myElement").on("touchmove", function(e) {
  //      currentY = e.originalEvent.touches[0].pageY;
  //      delta = currentY - startingY;
  //  });
  //});

  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- ADD EVENT LISTENER ------------- //

var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);



// ------------- SLIDE MOTION ------------- //

function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

Answer 1

我对你的代码做了一些修改，因为触摸事件在所有浏览器中都是相同的...我们可以跳过检查它是哪个浏览器...所以用

替换检查浏览器的代码

function parallaxScroll(evt) {    
        var touchobj = evt.changedTouches[0]; 
        var dist = parseInt(touchobj.clientX) - startx; 
     }

现在我们需要找到两件事情1）起点和2）行走距离

1）起点

 window.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
        startx = parseInt(touchobj.clientX); // get x position of touch point relative to left edge of browser(X and Y upto the choice)
        e.preventDefault();
    }, false);

2）旅行距离

var touchobj = evt.changedTouches[0]; 
        var dist = parseInt(touchobj.clientX) - startx;

整体守则是：

function parallaxScroll(evt) {    
    var touchobj = evt.changedTouches[0]; 
    var dist = parseInt(touchobj.clientX) - startx; 

  if (ticking != true) {
    if (dist <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (dist >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- SLIDE MOTION ------------- //

function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}
 }

    var startx = 0;
    var dist = 0;
   window.addEventListener('load', function(){ 
    window.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
        startx = parseInt(touchobj.clientX); // get x position of touch point relative to left edge of browser
        e.preventDefault();
    }, false);
        window.addEventListener('touchmove', _.throttle(parallaxScroll, 60), false);
        }, false);

进行这些修改并保持其余部分使你的视差工作与触摸...如果你想我使它甚至与触摸和鼠标一起工作.. Lemme知道你是否想知道......

Parallaxing滚动滑动触摸屏

1 个答案: