通过下拉菜单更改图像的不透明度

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（）是为了花哨:)

Answer 4

您可以使用jQuery .fadeTo（）方法对其进行更改，该方法还可以在更新图像的不透明度时为您提供运动。

jQuery的：

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

要立即更改不透明度，只需将.fadeTo（“ slow”，opacityValue）替换为.fadeTo（“ fast”，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;
};

演示：jQuery

演示：javaScript