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

我为fancyness添加了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;
};

Demo : jQuery

Demo : javaScript

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

4 个答案: