Question

使用范围输入来查看使用javascript控制div旋转的示例，但无法看到如何将其更改为其他属性（如高度和不透明度）。这是一个例子：

function rotate(value)
{
x=document.getElementById('div1')
x.style.webkitTransform="rotate(" + value + "deg)"; 
}


<input type="range" min="0" max="360" value="0" onchange="rotate(this.value)">

感谢您的帮助。

Answer 1

<script type="text/javascript">
function divHeight(value)
{
    var x = document.getElementById('div1');
    x.style.height=value+"px"; 
}
</script>


<input type="range" min="0" value="0" onchange="divHeight(this.value)">

Answer 2

对于更通用的解决方案，您可以创建通用的setStyleOn方法。 jsFiddle

JS：

function setStyleOn(rule, targetId, value) {
    x = document.getElementById(targetId);
    x.style[rule] = value;
}

HTML：

<label>Rotation</label>
<input type="range" min="0" max="360" value="0" 
    onchange="setStyleOn('webkitTransform', 'div1', 'rotate(' + this.value + 'deg')">
<label>Opacity</label>
<input type='range' min='0' max='1.0' value='1.0' step='0.1' 
    onchange="setStyleOn('opacity', 'div1', this.value)" />
<label>Height</label>
<input type='range' min='0' max='100' value='10' step='1' 
    onchange="setStyleOn('height', 'div1', this.value + 'em')" />    
<label>Width</label>
<input type='range' min='0' max='100' value='10' step='1' 
    onchange="setStyleOn('width', 'div1', this.value + 'em')" />    
<div id="div1">
</div>

Answer 3

例如，在this site上解释了很多功能。

更改高度：您可以使用scale（），移动位置：translate（），偏斜形状：skew（）等......

对于不透明度，请使用opacity property。

使用范围滑块更改div高度

3 个答案: