Question

我想使用jQuery调整三角形的大小。我知道jQuery可调整大小的功能但在三角形的形状我怎么能调整它。这是我希望使用鼠标

调整大小的三角形代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用jQuery，您只需使用<input type="range"/>滑块来更新驱动三角形的属性的值。在您的情况下，这是border-width。

＆＃13;

$(function() {

  var triangle = $('.triangle');
  var slider = $('#triangle-control');

  slider.on('change', function(e) {

    triangle.css({
      'border-width': this.value + 'px'
    })

  })


});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

如何使用Jquery调整三角形的大小

1 个答案: