Question

我在容器内有一个容器和图像。当容器不在视图中时 - 图像必须处于平移y 0％。当容器进入视口的中途并且过半时 - 图像必须平移50％。％值必须绑定到容器到视口中的位置（通过滚动控制）。容器的位置也决定了图像翻译的速度。我遇到的问题是，当速度值发生变化时，图像会向上或向下猛然而不是从那一点开始改变速度。

这是我的剧本：

from Tkinter import Tk
from ScrolledText import ScrolledText


def returnPressed(value):
    print "CONTENT: " + value


root = Tk()
st = ScrolledText(root)
st.bind("<Return>", lambda event, i=st.get("1.0", "end-1c"): returnPressed(i))
st.insert("insert", "TEST")
st.pack()
root.mainloop()

这是容器和图像的sass：

if (wScroll > $(".largeWindow").offset().top - ($(window).height())) {
    var cont = $(".largeWindow");
    var img = $(".coffee2");
    var top = cont.offset().top - cont.height();
    var speed;

    // translate the image within the container
    var moveImage = function() {
      setSpeed();
      var scroll = Math.floor((wScroll - top)) * speed;
      return img.css("transform", "translate(-50%, " + scroll + "%)");
    }

    // get the position of the image within the container
    var getImagePos = function() {
      return img.position().top - img.height()/2;
    }

    var getContainerPos = function() {
      var windowHeight = $(window).height();
      var contPos = Math.floor(cont.offset().top + cont.height()/2) - wScroll;
      return Math.floor(contPos/windowHeight * 100);
    }

    // set the speed the image will be translated at
    var setSpeed = function() {
      if (getContainerPos() < 50) {
        speed = 0;
      }
      else if (getContainerPos() < 60 ) {
        speed = 0.5
      }
      else if (getContainerPos() < 70 ) {
        speed = 0.5
      }
      else {
        speed = 0.8
      }
    }

    getContainerPos();
    moveImage();
    getImagePos();   
    }

Javascript - 使用滚动控制不同速度下的图像移动

0 个答案: