0

我有一个滑块可以更改我网站的不透明度

<script type="text/javascript">
    $(document).ready(function() {        
        $('#slider').slider({ 
        min: 0, 
        max: 1, 
        step: 0.01, 
        value: 1,
        orientation: "vertical",
             slide: function(e,ui){
$('body').css('opacity', ui.value)
             }                
        })
    });
</script>

但我不想改变我体内 2 或 3 类的不透明度。谢谢。

LE：同时我想降低一些元素的不透明度，而不是他们我想要一个黑色面具。所以在整个站点上只有 .the_window 和 .the_trigger 可见并且背景为黑色。示例：catalog-online.ro/test/

4

3 回答 3

2

尝试这个

document.getElementsByTagName("body").style.opacity = "0";
于 2016-03-05T09:15:18.053 回答
0

CSSopacity将应用于后代元素。由于您正在更改<body>不透明度，因此它将影响整个页面。您必须选择页面上的其他元素并更改这些元素的不透明度，避免您不想更改不透明度的类。

编辑：这是一个非常简单的演示，可能会有所帮助：

HTML

<div id="main">Lorem ipsum, my opactiy is not affected</div>
<p>My opactiy is affected</p>
<div id="lightbox"></div>

CSS

#lightbox {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.6;

}

#main {
    position:relative;
    background-color:#fff;
    z-index:1;
}

p {
    color:#f00;
}
于 2013-04-11T16:15:08.590 回答
0

我不是 jquery 人，但你可以在幻灯片功能中尝试这样的事情：

slide: function(e,ui){
   $('body').css('opacity', ui.value);
   $('#element_1_ID').css('opacity', 1);
   $('#element_2_ID').css('opacity', 1);
}

将 element_1_ID 和 element_2_ID 替换为您不想对其应用不透明度的那些元素的 ID。希望它可以工作，否则另一种选择可能是设置单个元素的不透明度。将一些设置为 0，将一些设置为 1。

于 2013-04-11T16:15:30.850 回答