Verschieben Element mit Bereich direkt -javascript

Ich möchte mit der Änderung der Position ändern (Bereich) ohne zu schneiden Wenn ich ändere und ich hebe meine Hand auf die (Bereich) beginnt die Bewegung Aber ich möchte mit der Änderung vermitteln direktVerschieben Element mit Bereich direkt -javascript

meinen Code mit Lauf:

function move(){ 
 
\t var x = document.getElementById("spin").value; 
 
\t var image = document.getElementById("test").style; 
 
\t 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" onChange="move()" style="width:100%;"/> 
 
     <div id="test"><h3>I want move with range):</h3></div> 
 
    </body> 
 
    </html>

Quelle

2016-08-04 Jack King

sorry für mein schlechtes Englisch langues .. Zu diesem I Anlage laufen Code .. Ich will nur Element bewegen sich mit Bereich @DontVoteMeDown –

Verwenden oninput statt onchange bis c Ändern Sie den Text in Echtzeit.

function move(){ 
 
\t var x = document.getElementById("spin").value; 
 
\t var image = document.getElementById("test").style; 
 
\t 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>

Quelle

2016-08-04 17:27:24

Vielen Dank .. genau das, was ich will .. –

@JackKing glücklich zu helfen –

Ändern Sie den Ereignis-Listener change-mousemove.

Verwenden Sie für better animation performance CSS transform Eigenschaft.

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>

Quelle

2016-08-04 17:31:22

Dies ist auch eine großartige Vielen Dank –

Verschieben Element mit Bereich direkt -javascript

Antwort

Verwandte Themen