1

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

4

4 回答 4

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

于 2013-10-30T16:55:01.033 回答
0

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

<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() :)

于 2013-10-30T16:57:14.523 回答
0

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

$(document).on('change', '#task3control') { 
var percent = $(this).find('option:selected').text().replace('%', '');
var decimal = parseFloat(percent) / 100; 
$('#tardis').css('opacity', decimal);
});
于 2013-10-30T16:49:31.980 回答
0

您可以使用jQuery .fadeTo()方法更改它，该方法还可以在更新图像的不透明度时为您提供运动。

jQuery :

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

要立即更改不透明度，只需将.fadeTo("slow", opacityValue)替换为.fadeTo("fast", opacityValue)。

也可以使用javaScript来完成。只需使用selectedIndex属性获取所选选项的索引，并使用该索引获取所选选项的值。然后使用该值更改图像的值。

脚本：

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

于 2013-10-30T16:57:40.343 回答