将“180-360”的数据范围标准化到“0-100”范围 - jQuery/JS
问题描述:
我有一个图像旋转,但它只能在180度和360度之间旋转。但我需要输入的目标值在0 - 100之间。将“180-360”的数据范围标准化到“0-100”范围 - jQuery/JS
因此,如果您输入20的targetValue,它将旋转图像的范围180deg - 360deg的20%。
我重视我已经在代码片段 -
任何帮助,将不胜感激!
CODE -
var targetValue = 100; //CAN ONLY BE BETWEEN 0 & 100
console.log(targetValue);
function targetChange(){
$('#target').css('transform', 'rotate(' + targetValue + 'deg' + ')');
console.log('hello');
}
targetChange();
.target {
position: absolute;
\t width: 100%;
height: 100%;
z-index: 2;
transform: rotate(180deg);
}
<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">
答
这很简单,只要
- 取输入值(0-100)
- 查找的180度比例
- 它添加到180范围内给一个值180-360
这证明下面
$('#input').on("change", function(){
var val = +$(this).val();
var rotAmount = 180 + ((val/100) * 180)
$('#output').val(rotAmount);
$('#target').css('transform', 'rotate(' + rotAmount + 'deg' + ')');
});
.target {
position: relative;
\t width: 100%;
height: 100%;
z-index: 2;
transform: rotate(180deg);
}
<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">
+1
这是正确的。+ 1 –
+0
这是完美的,非常感谢Jamiec!感谢帮助。 – Darian
答
检查了这一点:
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();
这不是100%清楚,有一个630的目标值。但是你只能输入一个百分比?百分比/ 100 * 360?或者你想“targetValue%360”?什么是输入,什么是预期输出? – Niels
嗨,感谢您的回复,对不起,这是一个错字。我的错误,输入值将介于0和100之间。这将在180和360度之间旋转图像。所以如果输入20,这将是180-360范围的20%。 – Darian