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

Change opacity of an image via drop down menu

本文关键字：图像 不透明度 下拉菜单      更新时间：2023-09-26

我必须使用一个下拉菜单，其中包含从0%-100%的百分比来更改图像的不透明度，因为我本周才开始使用javascript（理想情况下应该使用addEventListeners）我不确定从哪里开始。

如果你可以使用jQuery，这样的东西应该可以工作。 

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

<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/

首先，您的选项需要这样的值

<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（） 以示花哨:)

您可以使用

jQuery.fadeTo（）方法进行更改，该方法也可以在更新图像的不透明度时为您提供动作。

j查询 ：

$("#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

相关文章：