通過下拉菜單更改圖像的不透明度

Question

我必須使用包含0％-100％百分比的下拉菜單來更改圖像的不透明度，因爲本週我纔開始使用JavaScript（並且非常適合應該使用addEventListeners）我真的不知道從哪裏開始。

Answer 1

像這樣的東西應該可以工作，如果你可以使用jQuery。

$(document).on('change', '#task3control') { 
var percent = $(this).find('option:selected').text().replace('%', ''); 
var decimal = parseFloat(percent)/100; 
$('#tardis').css('opacity', decimal); 
}); 

Answer 2

<select name="task3control" id="task3control" onchange="opacity();"> 
    .... 
</select> 

，如果你的價值添加到每個option這是可以做到這樣的：

function opacity() 
{ 
    var task3control = document.getElementById("task3control"); 
    setOpacity(
     document.getElementById("tardis"), 
     task3control.options[task3control.selectedIndex].value 
    );  
} 

function setOpacity(tardis, value) 
{ 
    tardis.style.opacity = "." + value; 
    tardis.style.filter = "alpha(opacity=" + value + ")"; 
} 

---

例子：http://jsfiddle.net/hunter/4zBpC/

Answer 3

首先你的選擇需要例如像這樣的值

<select name="task3control" id="task3control"> 
    <option>Select One</option> 
    <option value="0.0">0%</option> 
    <option value="0.1">10%</option> 
    <option value="0.2">20%</option>  
    <option value="0.3">30%</option> 
    <option value="0.4">40%</option> 
    <option value="0.5">50%</option> 
    <option value="0.6">60%</option> 
    <option value="0.7">70%</option> 
    <option value="0.8">80%</option> 
    <option value="0.9">90%</option>        
    <option value="1.0">100%</option> 
</select> 

然後，只需使用此

$(document).ready(function() { 
    var image = jQuery('img#tardis') 
    jQuery('#task3control').on('change', function(event) { 
     var opacityValue = parseFloat(jQuery(this).val()); 
     image.fadeTo('fast', opacityValue); 
    }); 
}); 

我加fadeTo（）用於fancyness :)

Answer 4

可以使用jQuery的.fadeTo（）方法，也可以給它改你更新圖像的不透明度時的動作。

的jQuery：

$("#task3control").change(function(){ 
    var opacityValue = ($(this).val().replace("%", ""))/100; 
    $("#tardis").fadeTo("slow", opacityValue); 
}); 

爲了使混濁立即改變只需更換.fadeTo（ 「慢」，opacityValue）與.fadeTo（ 「快」，opacityValue）。

它也可以使用javaScript完成。只需使用selectedIndex屬性獲取所選選項的索引並使用該索引獲取所選選項的值。然後使用該值更改圖像的值。

JavaScript的：

task3control.onchange = function UpdateOpacity(){ 
    var element = document.getElementById("task3control"); 
    var opacityValue = (element.options[element.selectedIndex].value.replace("%", ""))/100; 
    var myImage = document.getElementById("tardis"); 
    myImage.style.opacity = opacityValue; 
}; 

Demo : jQuery

Demo : javaScript