Question

我想改变位置（范围）而不切割当我改变并且我举手时（范围）开始运动但我想直接表达改变

我的代码运行：

＆＃13;

function move(){
	var x = document.getElementById("spin").value;
	var image = document.getElementById("test").style;
	image.marginLeft=x+"px";
}

＆＃13;

    #test h3{
          margin-left:0px;
      overflow: hidden;
      color:red;
          }

＆＃13;

   <html>
    <head>
 
      </head>
     <body>
<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500"  onChange="move()" style="width:100%;"/>
       <div id="test"><h3>I want move with range ):</h3></div>
     </body>
    </html>

＆＃13;

Answer 1

使用oninput代替onchange来实时更改文字位置。

function move(){
	var x = document.getElementById("spin").value;
	var image = document.getElementById("test").style;
	image.marginLeft=x+"px";
}

#test h3{
          margin-left:0px;
      overflow: hidden;
      color:red;
          }

<html>
    <head>
 
      </head>
     <body>
<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500"  oninput="move()" style="width:100%;"/>
       <div id="test"><h3>I want move with range ):</h3></div>
     </body>
    </html>

Answer 2

将事件监听器从change更改为mousemove。

better animation performance使用CSS transform属性。

function move(){
    var x = document.getElementById("spin").value;
    var image = document.getElementById("test");
    image.style.transform = "translateX(" + x + "px)";
}

body {
   overflow-x: hidden;
}

#test {
   will-change: transform;
}

#test h3{
   margin-left:0px;
   overflow: hidden;
   color:red;
}

<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500" onmousemove="move()" style="width:100%;"/>
<div id="test"><h3>I want move with range ):</h3></div>

直接使用范围移动元素-javascript

2 个答案: