我如何调整使用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的三角形状

回答

相关问题