4輸入&動態變化變換

我正在嘗試制作一個轉換生成器。

用戶會不斷更新這個，但沒有成功。因為當我使用 jquery element.css('transform', .... 它會將其更改為單例。但是，我無法更改其他元素。

HTML

<p>ROTATE X</p>
 <input class="inputrange" name="transformRx" type="range">
<p>ROTATE Y</p>
 <input class="inputrange" name="transformRy" type="range">
<p>SKEW Y</p>
 <input class="inputrange" name="transformSy" type="range">
<p>SKEW X</p>
 <input class="inputrange" name="transformSx" type="range">

<!--2-->
<p>ROTATE X</p>
<input class="inputrange2" name="transformRx" type="range">
<p>ROTATE Y</p>
<input class="inputrange2" name="transformRy" type="range">
<p>SKEW Y</p>
<input class="inputrange2" name="transformSy" type="range">
<p>SKEW X</p>
<input class="inputrange2" name="transformSx" type="range">

<div id="inputrange" class="ht" name="draggable">
  <div id="inner-inputrange"></div>
</div>

<div id="inputrange2" class="ht" name="draggable">
  <div id="inner-inputrange2"></div>
</div>

JS

$('input[type="range"]').on('input change', function(){
switch (this.name){
case "transformRx":
      calculateMatrix(this.className, this.value, null, null, null)
break;
case "transformRy":
  calculateMatrix(this.className, null, this.value, null, null)
  break;
case "transformSy":
  calculateMatrix(this.className, null, null, this.value, null)
  break;
case "transformSx":
  calculateMatrix(this.className, null, null, null, this.value)
  break;
}})

function calculateMatrix(elName, rotateX, rotateY, skewY, skewX) {
if (elName != "undefined") {
$('#' elName).css('transform', ''rotateX(' rotateX 'deg) rotateY(' rotateY 'deg) skewX(' skewX 'deg) skewY(' skewY 'deg)')
}
}

JSFIDDLE

我只是想問一個問題，不得不進行大量編輯才能發布問題。

可能有些事情我忘記了。

uj5u.com熱心網友回復：

這就是你想要的？

您不能在一個元素中添加多個轉換，因此您必須在一個字串中創建所有轉換。

var transform = [];

function updateCss(This) {
  // console.log(This);
  const type = $(This).data("type");
  const end = $(This).data("end");
  const value = $(This).val();
  let transform_string = "";
  transform[type] = `${type}(${value}${end})`;

  Object.keys(transform).forEach((item, index, array) => {
    transform_string  = transform[item];
  });
  $('#inputrange').css("transform",transform_string);
}

#inputrange{
  width: 10rem;
  height: 5rem;
  background: blue;
}

#inner-inputrange{
  width: 5rem;
  height: 100%;
  background: purple;
}
#inputrange2{
  margin-top: 5rem;
  width: 10rem;
  height: 5rem;
  background: blue;
}

#inner-inputrange2{
  width: 5rem;
  height: 100%;
  background: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>ROTATE X</p>
 <input class="inputrange"data-type="rotateX" data-end="deg" onchange="updateCss(this)" name="transformRx" type="range">
<p>ROTATE Y</p>
 <input class="inputrange" data-type="rotateY" name="rotateY" data-end="deg" 
        onchange="updateCss(this)" type="range">
<p>SKEW Y</p>
 <input class="inputrange"
        data-type="skewY"
        data-end="deg" 
        onchange="updateCss(this)"
        name="transformSy" type="range">
<p>SKEW X</p>
 <input class="inputrange" name="transformSx"
         data-type="skewX"
        data-end="deg" 
        onchange="updateCss(this)"
        type="range">

<div id="inputrange" class="ht" name="draggable">
  <div id="inner-inputrange"></div>
</div>

標籤：javascript html jQuery css 输入

上一篇：如何匯入另一個dart檔案的主要功能

下一篇：display:'table'無法正常作業