Question

我有一个代码，通过单击按钮可以使瓶子中的水位上升或下降。但是，如果不点击停止，它就无法停止。当它清空时我需要它基本上重置，并且水位的div不会低于某一点（或高于某一点）。如果你对我正在制作的东西感兴趣;我正在制作酒精模拟器。所以你基本上会看到酒精饮料的水位下降（即100 px），100 px下降意味着你可以看到胃中的水位（alcogol水平），即50 px，相当于20 px血液循环和大脑中10 px。（只是为了得到一个主意。）

但是，如果我点击下降按钮，div将离开瓶子，并将有一个无尽的旅程。（请问，不是jquery）

这是我的JS代码：

function move_img(str) {
var step=2 ; // change this to different step value
switch(str){
case "down":
var x=document.getElementById('i1').offsetTop;
x= x + step;
document.getElementById('i1').style.top= x - 1 + "px";
break;

case "up":
var x=document.getElementById('i1').offsetTop;
x= x -step;
document.getElementById('i1').style.top= x + "px";
break;

case "left":
var y=document.getElementById('i1').offsetLeft;
y= y - step;
document.getElementById('i1').style.left= y + "px";
break;

case "right":
var y=document.getElementById('i1').offsetLeft;
y= y + step;
document.getElementById('i1').style.left= y + "px";
break;
}
}


function auto(str) {
 myVar = setInterval(function(){ move_img(str); }, 2)  ;


}
setTimeout(function( ) { clearInterval( myVar ); }, 1);
function nana(){


}

Answer 1

你的小提琴不起作用。您需要指定高度以及顶部属性，我相信top必须高于底部。我已经做了一个例子here。您的示例的更改包括：

//javascript
if (str == 'up' || str == 'down') {
    var top = el.offsetTop;
    var height = el.offsetHeight;  //get height to modify
    console.log(height);
    if (str == 'up') {
        top -= step;
        height += step;  //adjust height
    } else {
        top += step;
        height -=step;  //adjust height
    }
    if (top_max >= top && top >= 0) {  //make sure #i1 is inside #i
        document.getElementById('i1').style.top = top + "px";
        document.getElementById('i1').style.height = height + "px";  //modify height
    } else {
        clearInterval(myVar)
    }
//css
#i1 {
  width: 100px;
  display: inline-block;
  background:red;
  position: absolute;
  top: 150px;  //initial top
  bottom: 250px;  //as as bottom of #i
  height:100px;  //initial height

}

我想阻止我的div移动

1 个答案: