javascript - 使用 input type="range" 缩放图像

Question

标题说什么。可能吗？我希望使用诸如输入类型=“范围”之类的滑块从其中心放大和缩小图像。

提前致谢！

Answer 1

<input id="ranger" type="range" min="1" max="100" value="100" />
<hr />
<img id="image" src="http://google.com/images/logo.png" width="275" height="95" />

var ranger = document.getElementById('ranger'),
    image =  document.getElementById('image'),
    width = image.width,
    height = image.height;

ranger.onchange = function(){
    image.width = width * (ranger.value / 100);
    image.height = height * (ranger.value / 100);
}

演示：http: //jsfiddle.net/DnE83/1/

研究它，弄清楚它是如何工作的。