Как изменить скорость шприца с ползунком с помощью JQuery или JavaScript

-1

Моего требования имеет следующие шаги:Как изменить скорость шприца с ползунком с помощью JQuery или JavaScript

Там будет слайдер шага, который имеет три шага управления (Slow, Normal и Fast).
Медленное: ½ Х скорость.
Нормальный: X скорость.
Быстрый: скорость 2X.
Используя эти элементы управления, пользователь может изменить скорость анимации.
Скорость по умолчанию будет нормальной.

Можете ли вы помочь мне в этой проблеме?

2017-01-11 Aasiya Mairaj

Я получил свое решение здесь, это код.

здесь JS файл

$(function() { 
    $("#slider-range-max").slider({ 
     min:0.75, 
    max:3, 
    value:1.5, 
    slide:function(event,ui){ 
     console.log(ui.value); 
     if(ui.value=="0.75"){ 
      console.log("min"); 
      slow(); 

     }else if(ui.value=="2.75"){ 
      console.log("max"); 
      fast(); 
     }else{ 
      console.log("nor"); 
      normal(); 
     } 
    } 
    }); 
    function slow(dur) { 
       document.getElementById("adam").style.animation="walk-east 3s steps(8) infinite"; 
      } 
    function fast(dur) { 
     document.getElementById("adam").style.animation="walk-east 0.75s steps(8) infinite"; 
    } 
    function normal() { 
     document.getElementById("adam").style.animation="walk-east 1.5s steps(8) infinite"; 
    } 
    normal(); 
    });

здесь файл HTML

<html> 
    <head> 
     <title>Motion Filter</title> 
      <link href="css/style.css" rel="stylesheet" /> 
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
      <link rel="stylesheet" href="/resources/demos/style.css"> 
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<!--   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->   
    </head> 
    <body>   
     <div id="animation-containter"> 
      <div id="adam"></div> 
     </div> 
     <div id="slider-range-max"></div> 
    </body> 
    <script src="js/comp.js" type="text/javascript"></script> 
</html>

Вот CSS

.ui-slider-horizontal { 
    height: .8em; 
    width: 22em; 
    margin: 10px; 
} 
#animation-containter{ 
    margin: 10px; 
    height: 120px; 
    background: pink; 
    width: 800px; 
    border: 2px solid brown; 
    padding: 5px; 
} 
#adam{ 
    background: url("../assets/images/man.png"); 
    height: 105px; 
    width: 56px; 
/* animation: walk-east 2.0s steps(8) infinite;*/ 
} 
@keyframes walk-east{ 
    from{ background-position: 0px; } 
    to{ background-position: -488px; } 
}

источник

2017-01-11 11:08:47

Как изменить скорость шприца с ползунком с помощью JQuery или JavaScript

ответ

Смежные вопросы