Question

我的要求有以下步骤：

将有一个步进滑块，它有三个控制步骤（慢速，正常和快速）。
慢：½X速度。
正常：X速度。
速度：2倍速。
使用这些控件，用户可以更改动画的速度。
默认速度为正常。

你能帮我解决这个问题吗？

Answer 1

我的解决方案是代码。

这里是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; }
}

如何使用jquery或javascript更改滑块的速度

1 个答案: