【BHB|脚本|页面美化】 BHB聊天室背景更换（v3.0.0聊天室界面更新）已全局适配 html 浏览器插件

用一下

let

吧，ECMA要哭了

（虽然是个debug语句吧

说来这个【背景样式】按钮是干啥用的，为什么点击之后，出来的是一个接近空白的窗口

（之前的版本还有个点来着

插件出了新BUG，启用插件之后页面排版就乱了

字体变成了这样的，感觉像是加粗了，乐

看到了更新后的效果，我搞了点按钮的代码，建议你试试美化一下按钮显示

<style>
.gray-button {
    background-color: #808080; /* Gray color */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 10px; /* 10px border radius for rounded corners */
}

.gray-button:hover {
    background-color: #a0a0a0; /* Lighter gray color on hover */
}
</style>
<script>
function handleMouseOver() {
    document.querySelector('.gray-button').style.backgroundColor = '#a0a0a0'; // Change color on hover
}

function handleMouseOut() {
    document.querySelector('.gray-button').style.backgroundColor = '#808080'; // Revert back to original color
}
</script>
<button class="gray-button" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">背景样式</button>

然后就是

虽然你刚刚更新加了关闭按钮，但是

这俩跑同一行去了（乐

所以为啥，这left是个百分比却不支持小数呢？（而且这种store的值用“left”作为变量名的话感觉不太明了啊，left_offset之类的会好一些吧

而且，偏移量什么的为啥不支持用px计算呢，这图片分辨率毕竟是个用px计算的东西

最后就是，如果偏移量与放缩比例绑定到具体的数值上，换图片的时候还得重新计算一遍（然后每计算一次就得刷新一次

关于图片的适应搞成这样的如何？“填充”“适应”“拉伸”“平铺”“居中”

其实就是根据图片的长宽和屏幕尺寸做一些数学计算，而且每个逻辑应该是直接套用公式的

臆测一下代码应该类似于

let offsetfinal_left = 0; //整数，单位px
let offsetfinal_top = 0; //整数，单位px
let ratiofinal_width = 0; //浮点数，比值没有单位，将原始图片乘以此值后使用
let ratiofinal_height = 0; //浮点数，比值没有单位

let width_pic = get_imginfo("pictureuploaded.png", width);
let heigh_pic = get_imginfo("pictureuploaded.png", height);
let width_canvas = window.screen.width;
let heigh_canvas = window.screen.height;

//填充型：用原始图片的较短边与屏幕匹配，将原始图片的另一条边裁切居中；屏幕一定被填充满，原始图片不一定完整展示
if(width_canvas > heigh_canvas){ //如果窗口是横向的
    if(width_pic > heigh_pic){ //如果图片是宽比高更长，即横向图片
        offsetfinal_top = 0; //垂直偏移设置为0
        let ratiocommon_all = heigh_canvas / heigh_pic; //计算放缩比，适应型的宽高比例为同一数值，故用同一变量，在流程最后赋值给具体的两条边；浮点数，可能大于1，可能小于1
        offsetfinal_left = (width_canvas - width_pic * ratiocommon_all) / 2; //计算水平偏移，整数，单位px，可能为正值，可能为负值
        ratiofinal_width = ratiocommon_all;
        ratiofinal_height = ratiocommon_all;
    }
    else{ //如果图片是纵向图片
        offsetfinal_left = 0; //水平偏移设置为0
        ratiocommon_all = width_canvas / width_pic; //同上，let只在代码块内起作用；浮点数，可能大于1，可能小于1
        offsetfinal_top = (heigh_canvas - heigh_pic * ratiocommon_all) / 2; //计算竖直偏移，整数，单位px，可能为正值，可能为负值
        ratiofinal_width = ratiocommon_all;
        ratiofinal_height = ratiocommon_all;
    }
else{//如果窗口是纵向的
    blahblahblahblah;
}

//适应型：将原始图片的长边与屏幕匹配，不管另一条边，空出的背景用单色填充；屏幕内必能看到完整的原始图片；跟填充型反着来就行了

//拉伸型：不保留图片的原始分辨率，将其拉伸至窗口分辨率

//居中型：以图片原分辨率呈现，只调整两个偏移量而不调整缩放比例

其实只有

rationcommon_all = height_canvas / heigh_pic;

offsetfinal_left = (width_canvas - width_pic * ratiocommon_all) / 2;

这两行是核心逻辑