点击打开和关闭CSS过滤器亮度

我正在设置一个页面，其中包含调暗页面部分的按钮。我修改了一些我在这里找到的代码：http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/点击打开和关闭CSS过滤器亮度

但是我在javascript/jQuery上很糟糕，我不确定如何让它做我需要的。

这里的脚本：

$(document).ready(function(){ 
    $("#shadow").css("height", $(document).height()).hide(); 
    $(".lightSwitcher").click(function(){ 
     $("#shadow").toggle(); 
     if ($("#shadow").is(":hidden")) 
      $(this).removeClass("turnedOff"); 
     else 
      $(this).addClass("turnedOff"); 
    }); 
});

而且这里有一个的jsfiddle：http://jsfiddle.net/e2b7dxa0/

我想它，以便在单击光开关在与“影子” ID什么变暗。现在，任何具有该ID的内容都会隐藏起来，直到单击灯开关并且我希望它可以看到，无论开关是否打开。我只想让开关切换CSS中的亮度过滤器。

另外，jQuery中有一些东西导致高度扩展到页面的高度，我想删除它。

来源

2015-10-07 Eagle Jow

的高度是因为'$（文件）.height（）' – hjpotter92

将您的亮度过滤器放在单独的类中，并在单击该按钮时将该类应用于#shadow对象。

$(document).ready(function() { 
 
    $(".lightSwitcher").on('click', function() { 
 
     $(this).toggleClass("turnedOff"); 
 
     $('#shadow').toggleClass('filter'); 
 
    }); 
 
});

.lightSwitcher { 
 
    position:absolute; 
 
    z-index:101; 
 
    background-image:url(http://i.imgur.com/pyMBQnZ.png); 
 
    background-repeat:no-repeat; 
 
    background-position:left; 
 
    outline:none; 
 
    text-decoration:none; 
 
    margin-left: 70%; 
 
} 
 
#lightswitch { 
 
    height: auto; 
 
} 
 
.filter { 
 
    -webkit-filter: brightness(50%); 
 
    -moz-filter: brightness(50%); 
 
    -o-filter: brightness(50%); 
 
    -ms-filter: brightness(50%); 
 
    filter: brightness(50%); 
 
} 
 
.turnedOff { 
 
    color:#ffff00; 
 
    background-image:url(http://i.imgur.com/nuKtnZZ.png); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="lightSwitcher"><img id="lightswitch" src="http://i.imgur.com/3nawaAf.png"></a> 
 

 
<div id="shadow"> 
 
    <img src="https://placeimg.com/320/240/nature"> 
 
</div>

来源

2015-10-07 05:52:30 hjpotter92

几乎贴我的，但你打我给它。 –

完美！谢谢。 –

http://jsfiddle.net/e2b7dxa0/2/

$(".lightSwitcher").click(function(){ 

     if ($("#shadow img").hasClass("brightness")){ 
      $("#shadow img").removeClass("brightness"); 
      $(this).removeClass('turnedOff') 
     } 

     else{ 
      $("#shadow img").addClass("brightness"); 
      $(this).addClass('turnedOff') 
     } 
    });

来源

2015-10-07 05:59:01

点击打开和关闭CSS过滤器亮度

回答

相关问题