点击时打开和关闭 CSS 滤镜亮度
Turn CSS Filter Brightness On and Off on Click
我正在设置一个带有按钮的页面,该按钮可以使页面的某些部分变暗。我修改了在这里找到的一些代码:http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/
但我在 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/
我想要这样,当点击电灯开关时,任何带有 "shadow" id 的东西都会变暗。现在,在单击电灯开关之前,具有该 ID 的所有内容都处于隐藏状态,我希望无论开关是打开还是关闭,它都可见。我只希望开关切换 CSS 中的亮度滤镜。
此外,jQuery 中有一些东西导致高度扩展到页面的高度,我想删除它。
将你的亮度过滤器放在一个单独的 class 中,并在单击按钮时将 class 应用到 #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>
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')
}
});
我正在设置一个带有按钮的页面,该按钮可以使页面的某些部分变暗。我修改了在这里找到的一些代码:http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/
但我在 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/
我想要这样,当点击电灯开关时,任何带有 "shadow" id 的东西都会变暗。现在,在单击电灯开关之前,具有该 ID 的所有内容都处于隐藏状态,我希望无论开关是打开还是关闭,它都可见。我只希望开关切换 CSS 中的亮度滤镜。
此外,jQuery 中有一些东西导致高度扩展到页面的高度,我想删除它。
将你的亮度过滤器放在一个单独的 class 中,并在单击按钮时将 class 应用到 #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>
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')
}
});