Question

我试图根据按钮触发的某些值，在下面的图像上上下滑动条。理想情况下，新的＆＃34;开始＆＃34;每次的位置都是先前输入的＆＃34;结束＆＃34;位置（除非有更好的方法）。这是
example image

我的代码完成了我想要的大部分内容，除非我喜欢在每次点击按钮后让条形图在所需值之间平滑滑动。谢谢！

＆＃13;

<!DOCTYPE html>
<html>
</script>

</body>
</html>

<style>
#container {
  width: 19px;
  height: 186px;
  position: relative;
  background: clear;
margin: 0px; 
}
#animate {
border: 1px solid white;

  width: 32px;
  height: 12px;
  position: absolute;
  background-color: #252525;
}

</style>
<body>

<p>
<button onclick="myMove(0 ,20)">Move to Orange</button>
<button onclick="myMove(20, 100)">Move to Green</button>
<button onclick="myMove(100, 155)">Move to Blue</button>
</p> 

<div id ="container">
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left">
<div id ="animate"></div>
</div>

<script>
function myMove(start, stop) {
  var elem = document.getElementById("animate");   
 

  var id = setInterval(frame, 5);
  function frame() {
    if (start == stop) {
      clearInterval(id);
    } else {
      start++; 
      elem.style.top = start + 'px'; 
      
    }
  }
}
</script>

</body>
</html>

＆＃13;

Answer 1

使用 CSS3过渡
使用 data-*属性代替内联JS调用
简单JS 代码

var moveBtn = document.querySelectorAll("[data-move]");
var bar = document.getElementById("animate");

function move(el) {
  el.addEventListener("click", function(){
    bar.style.transform = "translateY("+ this.dataset.move +"px)";
  });
}

[].forEach.call(moveBtn, move);

#container {
  width: 19px;
  height: 186px;
  position: relative;
}
#animate {
  border: 3px solid #444;
  width: 14px;
  height: 8px;
  position: absolute;
  top:0;
  -webkit-transition: 0.4s;
          transition: 0.4s;
}

<p>
<button data-move="20">Move to Orange</button>
<button data-move="100">Move to Green</button>
<button data-move="170">Move to Blue</button>
</p> 

<div id ="container">
<img src="http://i.stack.imgur.com/3pLSG.png" alt="Fit">
<div id="animate"></div>
</div>

Answer 2

为了让酒吧平滑地滑动到下一个位置，而不是再次从顶部滑动，您需要知道酒吧当前从哪里开始。

这可以通过几种方式实现，或者通过使用全局变量存储当前位置，或者通过每次调用myMove时重新计算它的当前位置。

您需要考虑的另一件事是滑块可能需要向上滑动才能到达正确的位置，而不仅仅是向下。这在您用于检查条形图是否已经位于正确位置的if / else语句中最容易处理。

使用全局变量跟踪当前位置的示例：

（作为奖励myMove（）不再需要给出一个起始位置作为参数，只需要你希望栏最终的位置）。

＆＃13;

<!DOCTYPE html>
<html>
</script>

</body>
</html>

<style>
#container {
  width: 19px;
  height: 186px;
  position: relative;
  background: clear;
margin: 0px; 
}
#animate {
border: 1px solid white;

  width: 32px;
  height: 12px;
  position: absolute;
  background-color: #252525;
}

</style>
<body>

<p>
<button onclick="myMove(20)">Move to Orange</button>
<button onclick="myMove(100)">Move to Green</button>
<button onclick="myMove(5)">Move to Blue</button>
</p> 

<div id ="container">
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left">
<div id ="animate"></div>
</div>

<script>
var start = 0;
function myMove(stop) {

  var elem = document.getElementById("animate");   
 

  var id = setInterval(frame, 5);
  function frame() {
    if (start == stop) {
      clearInterval(id);
    } else if (start > stop){
      start--;
      elem.style.top = start + 'px';
    } else {
      start++; 
      elem.style.top = start + 'px'; 
      
    }
  }
}
</script>

</body>
</html>

＆＃13;

javascript动画 - 使用前一个终点的按钮

2 个答案: