gpt4 book ai didi

javascript - 我如何使用 Jquery 调整三 Angular 形的大小

转载 作者:行者123 更新时间:2023-11-28 15:38:25 26 4
gpt4 key购买 nike

我想使用 jQuery 调整三 Angular 形的大小。我知道 jQuery resizable 函数但是在三 Angular 形中我该如何调整它的大小。这是三 Angular 形的代码,我想用鼠标调整它的大小

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

最佳答案

使用 jQuery,您可以简单地使用 <input type="range"/> slider 更新驱动三 Angular 形的属性值。在您的情况下,这是 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>

关于javascript - 我如何使用 Jquery 调整三 Angular 形的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43873248/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com