2017-05-09 11 views
1

jQueryを使用して三角形のサイズを変更したいと思います。jQueryのサイズ変更可能関数 について知っていますが、どのようにサイズを変更できますか?ここで iは、マウスのjQueryを使用してJqueryを使用して三角形のサイズを変更するには

.triangle { 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    border-color: transparent transparent #007bff transparent; 
 
}
<div class="triangle"></div>

+1

コード助けを求める質問は、** **好ましくスタックスニペットに**質問自体に**それを再現するために必要な最短のコードを含める必要があります。あなたがリンクを提供したにもかかわらず、それが無効になるのであれば、あなたの質問は、同じ問題を抱える将来の他のSOユーザにとっては価値がないでしょう。 [**私のウェブサイトの何かが動作しないのは、リンクを貼り付けるだけです**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-リンクを張ることはできません)。 –

答えて

1

を使用してサイズを変更したい三角形のコードでは、単に三角形を駆動しているプロパティの値を更新する<input type="range"/>スライダーを使用することができます。あなたの場合、これはborder-widthです。

$(function() { 
 

 
    var triangle = $('.triangle'); 
 
    var slider = $('#triangle-control'); 
 

 
    slider.on('change', function(e) { 
 

 
    triangle.css({ 
 
     'border-width': this.value + 'px' 
 
    }) 
 

 
    }) 
 

 

 
});
.triangle { 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    border-color: transparent transparent #007bff transparent; 
 
    transition: border-width 500ms ease-in; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    
 
    
 
    <input id="triangle-control" type="range" min="20" max="100"/> 
 
    
 
    <div class="triangle"></div> 
 
    </body> 
 

 
</html>

関連する問題