使用输入类型=“范围”缩放图像 [英] Using input type="range" to scale an image

问题描述

标题说的是什么。可能吗？我想要一个图像，使用滑块（如输入类型=范围）从中心向上和向下缩放。

预先感谢！

解决方案

 < input id =rangertype =rangemin =1max =100 value =100/> 
< hr /> 
< img id =imagesrc =http://google.com/images/logo.pngwidth =275height =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/

研究它，研究它是如何工作的。

What the title says. Is it possible? I want an image to scale up and down from it's center using a slider such as the input type="range".

Thanks in advance!

解决方案

<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);
}

Demo: http://jsfiddle.net/DnE83/1/

Study it, work out how it works.

这篇关于使用输入类型=“范围”缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！