我如何調整使用jquery的三角形狀

我想調整使用jQuery的三角形。我知道jQuery可調整大小的函數，但在三角形狀中，我該如何調整它。下面是三角形，我想調整它使用鼠標我如何調整使用jquery的三角形狀

.triangle { 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 20px; 
 
    border-color: transparent transparent #007bff transparent; 
 
}

<div class="triangle"></div>

來源

2017-05-09 bhumiraj parmar

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在**堆棧片段**。雖然您提供了一個鏈接，但如果它變得無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。請參閱[**我網站上的某些內容不起作用，我可以只粘貼一個鏈接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯規，工作可以-I-剛剛糊一個鏈接到它）。 –

使用jQuery的代碼，你可以簡單地用一個<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>

來源

2017-05-09 18:28:06 couzzi

我如何調整使用jquery的三角形狀

回答

相關問題