Question

我有一个我正在旋转的图像，但它只能在180度到360度之间旋转。但我需要输入的targetValue介于0 - 100之间。

因此，如果您输入的targetValue为20，则会将图像旋转180度范围的20％ - 360度。

我附上了我已经使用的代码片段 -

任何帮助将不胜感激！

代码 -

＆＃13;

var targetValue = 100; //CAN ONLY BE BETWEEN 0 & 100

console.log(targetValue);

function targetChange(){
    $('#target').css('transform', 'rotate(' + targetValue + 'deg' + ')');
    console.log('hello');
}
targetChange();

＆＃13;

.target {
    position: absolute;
	width: 100%;
    height: 100%;
    z-index: 2;
    transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="target" id="target" src="http://i65.tinypic.com/oarptf.png">

＆＃13;

Answer 1

这就像

一样简单

取输入值（0-100）
找出180度的比例
将其添加到180以提供180-360

这在下面说明

＆＃13;

$('#input').on("change", function(){
    var val = +$(this).val();
    var rotAmount = 180 + ((val/100) * 180) 
    $('#output').val(rotAmount);
    $('#target').css('transform', 'rotate(' + rotAmount + 'deg' + ')');
});

＆＃13;

.target {
    position: relative;
	width: 100%;
    height: 100%;
    z-index: 2;
    transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter value between 0-100 <input id="input" type="number" min="0" max="100">
<br>
Rotation: <input type="text" id="output">
<hr>
<img class="target" id="target" src="http://i65.tinypic.com/oarptf.png">

＆＃13;

Answer 2

检查出来：

var targetValue = 100; //CAN ONLY BE BETWEEN 0 & 100

var normalizedValue = (targetValue / 100 * 180) + 180

console.log(targetValue);

function targetChange(){
    $('#target').css('transform', 'rotate(' + normalizedValue + 'deg' + ')');
    console.log('hello');
}
targetChange();

规范化数据范围＆＃34; 180 - 360＆＃34;到范围＆＃34; 0 - 100＆＃34; - jQuery / JS

2 个答案: