关于网页换肤的快捷简便方法分享（新人向）
本帖最后由 ZJReason 于 2020-1-10 09:39 编辑之前有看到悬赏有关网页换肤的帖子，帖子里回复的思路都是：提前设置好相关模块的样式，然后再用JS动态替换CSS。
就想着有没有比较简便的方法，不用每个CSS样式都写好几个版本。本人技术新宅，也没有什么好的想法。
通过在网上查阅资料，找到一种简单的实现方法。不多废话，直接上菜：
大体思路：在网页新建一个<div>，通过CSS样式实现：顶层、透明、滤镜效果。
只需要通过JS动态修改这一个样式就可以达到颜色转换的效果，具体代码如下：
关键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：
<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：
<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做动态背景！
由于添加图片后，模版大小超出上传文件限制。所以提供的模版里面是没有背景图片的，大家只能自己加图片改路 径了{:1_893:}
一点小思路分享给大家，如果有更好的思路欢迎留言评论！！！{:1_932:} 可以，思路不错 这个好，还需要改改变成改背景图片的 东方星雨 发表于 2020-1-10 08:15
这个好，还需要改改变成改背景图片的
好主意{:1_921:}看起来是要比纯色调高大的上，还能用动态图
学习了，之前不知道有鼠标穿透这属性。底层的都不能获得焦点 学习到了，谢谢楼主 ZJReason 发表于 2020-1-10 09:20
好主意看起来是要比纯色调高大的上，还能用动态图
能修改背景图的代码没放上来？？ 东方星雨 发表于 2020-1-13 08:01
能修改背景图的代码没放上来？？
放了图片的模版超出上传大小限制了，网盘分享给你
链接：https://pan.baidu.com/s/1Q-1KgIt7IjC8_8_qJm_GKg
提取码：1syy
页:
[1]