1

画像の不透明度を変更するには、0% ～ 100% のパーセンテージを含むドロップダウン メニューを使用する必要があります。始めること。

4

4 に答える 4

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

于 2013-10-30T16:57:40.343 に答える