序言
在一些纪念日网站会将网页中的颜色去掉变成灰黑模式。如下所示。
因为网页使用了静态化的技术,所以最好是只是用JavaScript就能实现自动选择相关模式并设置,而且尽可能统一配置。
实现
灰黑模式的实现
使用了css的filter 属性。给html整体添加滤镜。属性的具体使用可此查看filter CSS属性
自动化配置
我的思路是使用JavaScript判断一个配置文件是否存在。如果存在的话,则是灰黑模式,不存在则是彩色模式。但是要注意处理ajax的缓存问题。
代码
将所有的JavaScript的内容都放入了gray.js中
function autoSetGrayMode() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); //其他浏览器
} else if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //旧版IE
} catch (e) {}
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //新版IE
} catch (e) {}
if (!xmlhttp) {
window.alert("不能创建XMLHttpRequest对象");
}
}
yourFileURL = "http://192.168.32.64:8080/yibing/gray_config.html?fresh=" + Math.random(); ;
// xmlhttp.setRequestHeader("Cache-Control","no-cache");
xmlhttp.open("GET", yourFileURL, false);
xmlhttp.send();
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200)
changeToGray(true);
else
changeToGray(false);
}
}
function changeToGray(crayMode) {
var element = document.body;
if (crayMode) {
element.style.cssText = ' filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);';
} else {
element.style.cssText = '';
}
}
在需要使用的html页面中,如下使用。
<script type="text/javascript">
$(document).ready(function(){
autoSetGrayMode();
});
</script>
效果
目前通过测试,发现网页在浏览器打开正常,视频也可以实现灰度模式。但是在移动设备中,含有视频的页面,显示的是灰色的。但是点击视频播放,将会弹出一个播放窗口,播放窗口中的视频时彩色的。在IOS设备中部分出现无法播放的问题,和卡顿的问题。需要针对video 标签继续优化。