本帖最后由 ZJReason 于 2020-1-10 09:39 编辑
之前有看到悬赏有关网页换肤的帖子，帖子里回复的思路都是：提前设置好相关模块的样式，然后再用JS动态替换CSS。
就想着有没有比较简便的方法，不用每个CSS样式都写好几个版本。本人技术新宅，也没有什么好的想法。
通过在网上查阅资料，找到一种简单的实现方法。不多废话，直接上菜：
大体思路：在网页新建一个<div>，通过CSS样式实现：顶层、透明、滤镜效果。
只需要通过JS动态修改这一个样式就可以达到颜色转换的效果，具体代码如下：
关键css：
[CSS] 纯文本查看 复制代码
/*滤镜div样式*/
#view-mask { display:none;/*初始状态隐藏*/
position: fixed;/*定位div达到全屏效果*/
top: 0;
right: 0;
bottom: 0;
left: 0
pointer-events: none; /*鼠标点击穿透（这是重点：能实现顶层div不影响鼠标事件）*/
background-color: rgb(255, 255, 255);/*滤镜rgb颜色*/
opacity: .5;/*透明度*/
z-index: 999999;/*顶层*/
}
/*样式标签定位*/
.view-change{
position: fixed;
top:5%;
left:5%;
}
关键HTML：
[HTML] 纯文本查看 复制代码
<div id="view-mask"></div><div class="view-change">
<ul style="list-style-type:none;font-size: 0.8em;">
<li><a class="c" href="#">默认</a></li>
<li><a class="c" href="#">白天</a></li>
<li><a class="c" href="#">黑夜</a></li>
<li><a class="c" href="#">护眼</a></li>
</ul>
</div>
关键JS：
[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">
$(document).ready(function(){
$(".c").click(function(){
var data=this.innerHTML;
if(data=="默认"){
$("#view-mask").css("display","none");
}
if(data=="白天"){
$("#view-mask").css({"background":"rgb(255, 255, 255)","display":"block"});
}
if(data=="黑夜"){
$("#view-mask").css({"background":"rgb(0, 0, 0)","display":"block"});
}
if(data=="护眼"){
$("#view-mask").css({"background":"rgb(12, 224, 25)","display":"block"});
}
return false;
})
})
</script>
更新：网友提议改用背景图片比背景色好，修改了一下，感觉确实高大上了很多，还可以用gif做动态背景！
由于添加图片后，模版大小超出上传文件限制。所以提供的模版里面是没有背景图片的，大家只能自己加图片改路 径了
一点小思路分享给大家，如果有更好的思路欢迎留言评论！！！ | 
发表于 2020-1-9 16:20
|
发表于 2020-1-10 09:20
看起来是要比纯色调高大的上，还能用动态图
