2021-12-03 HTML5新增input:range滑块控件介绍和示例:使用transform属性实现一个可以通过拖动来实现任意角度的旋转框

前端OnTheRun

已于 2024-01-12 21:24:35 修改

阅读量76

点赞数

分类专栏：项目与应用文章标签： inputtype=range CSS3 transform 动态绑定角度旋转 JavaScript

于 2021-12-03 17:10:09 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/121703074

版权

项目与应用专栏收录该内容

57 篇文章 1 订阅

订阅专栏

要求

拖动下面的进度条来选定角度,上面的黄色框同时旋转到该角度
在这里插入图片描述

思路

需要将黄色方块的transform属性在script中进行动态绑定
将其角度设置为进度条的角度

代码

<body>
  <div style="width:200px;height:150px;background:yellow"></div>
  <br><br><br><br><br>
  <input type="range" 
          min="-360"
          max="360"
          value="0"
          onchange="xuanzhuan(this.value)"
  >
  <br>
  <p>当前旋转角度:<span>0deg</span></p>
</body>
<script>
  var div=document.querySelector("div");
  var span=document.querySelector("span");
  function xuanzhuan(value){
     span.innerHTML=value+"deg";
     div.style.transform="rotate("+value+"deg)";
  }
</script>