通过javascript改变正文的不透明度



我有一个滑块来改变我的网站的不透明度

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

try this

document.getElementsByTagName("body").style.opacity = "0";

我不是一个jquery的人,但你可以尝试这样的幻灯片函数:

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

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

CSS opacity将应用于后代元素。由于您正在更改<body>的不透明度,它将影响整个页面。你必须选择页面上的其他元素并改变它们的不透明度,避免那些你不想改变不透明度的类。

编辑:这里有一个非常简单的演示可能会有所帮助:

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

最新更新