またはJavaScript

-1

私の要件は、手順に従ってていますまたはJavaScript

を（、スローノーマルと高速）3つの制御手順を持つステップスライダーがあります。
遅い：1/2倍速。
通常：Xスピード。
高速：2倍速。
これらのコントロールを使用すると、アニメーションの速度を変更できます。
デフォルトの速度は標準です。

この問題で私を助けることができますか？

2017-01-11 Aasiya Mairaj

私の解決策はここにコードがあります。ここ

JSここでここでの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

です

$(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(); 
    });

を提出されます

.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

答えて

関連する問題