博客园自定义背景(一)
背景更改如下:
背景容器
我背景是在页首html代码中自定义的一段:
<div id="bgcont"><img id="bgimg" src="@{imgurl}">
</div>
这样可以比较方便的控制,也方便以后加一些功能之类的
图片平铺设置
首先要分两种屏幕去适应:
1> 较宽的屏幕
2> 较高的屏幕
对于较宽还是较高的判断还是比较好实现的:
let pw = 1920;
let ph = 1222;
let sw = window.innerWidth;
let sh = window.innerHeight;if (sw / sh > pw / ph) {较宽
} else {较高
}
pw是图片宽度,ph是图片高度
sw是窗口宽,sh是窗口高
利用两者的宽高比就比较容易实现想要达到的判断了
较宽的窗口我是让图片宽度填满窗口,高度上进行裁剪
同理较高的窗口我是让图片高度填满窗口,宽度上进行裁剪
但是我想让miku双眼一直在窗口区域内,也就是说,我需要对图片进行一些偏移
这个偏移只发生在
较宽的窗口中对top偏移,较高的窗口中对left偏移【换成bottom和right一样】
以窗口较高的时候的代码解释一下吧:
bg.style.height = "100%";
bg.style.width = "auto";
bg.style.top = "0";
let l = sw / 2 - pw * 0.65 / 1222 * sh;
if (l > 0) l = 0;
let d = sw - l - pw/ph*sh;
if (d < 0) d = 0;
l += d;
bg.style.left = l + "px";
bg是那个img
前三句是消除窗口较宽时产生的影响,你会发现这两坨代码就是围绕height,width,top,left这四个属性来回折腾的
l是计算出来的left值,
后边那句和在之后的d就是消除对应点移动到中心后产生的白边
最后算出一个left值
在let l = sw / 2 - pw * 0.65 / 1222 * sh;
这句中的0.65是你想要让图上一点始终出现在窗口中,这个点在图像中的位置为0.65图像宽度,也就是说只要改掉这个0.65,就可以很随意的控制想要实现的区域
值计算
前边粗粗的橙不拉基的那个框是屏幕,淡绿色的是图片,红色的点是对应要显示出来的区域,屏幕中有一条蓝色的线是屏幕中线
首先要计算出把红点平移到屏幕中线上需要指定的left,也就是这个样子:
可以看到,l大于0,左边出现了白边,那么我们需要把l改为0,消除白边
但是有时指定的区域过于靠右边,如下图:
这样在窗口右边产生了空白,之后就是要消除这个空白
计算出的d就是右边空白的大小,d若大于0,右边就会出现空白,l需要减去d,以消除空白。若d小于0,则无需进行这一个操作,于是这一步就退化成了if (d < 0) d = 0; l += d;
这两句
整个过程中我图中的l与代码中的l是有区别的,你会发现,我图中的l与实际赋值时的l是相反数,但是我代码中的l就是直接赋值给left的值,所以有些东西和代码中有区别,但是把我代码中的l全部取反就一样了
对于top也是同理的操作
转载于:https://www.cnblogs.com/ijrys/p/8455312.html
博客园自定义背景(一)相关推荐
- 博客园自定义背景图片
自从注册了博客园,整个大学就变得有趣起来了. 每天发发文章,看看他人故事.不亦乐乎. 园里个个都是人才,说话又好听,我超喜欢这里的! 我一开始也是用园里的主题,但是后来自己找到了很好看的图片,就想着想 ...
- 博客园自定义(全部样式分享)
博客园自定义 更新后的代码2021.12.08 /*星光*/ .wall{position: fixed;top: 0;left: 0;bottom: 0;right: 0; } div#midgro ...
- 博客园自定义鼠标样式
博客园自定义鼠标样式: 上传背景图片到服务器(在博客设置-> 文件中上传,上传前将图片后缀改为.ico) 添加代码到相应的位置 设置鼠标样式 博客设置-> 设置中页面定制 CSS 代码: ...
- 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...
前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
- 博客园自定义样式主题 -- cnblogs theme
目录 博客园自定义样式主题 1. 子标题 2. 导航栏 3. 文章主体样式 4. 引言样式 5. 代码不换行 6. 个性签名 7. 上一篇和下一篇 8. 评论 9. 提交按钮 10. 隐藏广告和搜索框 ...
- 设置博客园的背景图片,自定义样式以及导航目录
无意间看到几个大神的博客园,人家的背景为啥是彩色的?为啥有动画效果?为啥能自定义功能?我递归懵逼的同时羡慕不已,于是找了几个文章整理了一下自己的博客园主页 前提 你需要开通设置里面的js权限,请求开通 ...
- 博客园自定义博客侧边栏公告的过滤漏洞
温馨提示:本文章所提到的相关技术以及代码仅供学习交流,不可用来做违法或违反博客园相关规定的事情哦~而且本文章不许转载哦,请使用超链接. 来博客园已经有些日子了,博客早就申请了下来,在后台偶然看到了可以 ...
- 写了一个随机图片API接口,用来做博客园随机背景,欢迎使用,禁止爬取,需要套图可以直接联系博主...
20190917更新,今天早上发现接口突然不能用了显示ERR_TIMEOUT,上服务器看了一下进程还在运行,初步推测是web服务器的问题, flask是个web框架,也做了web服务器,但是非常的简单 ...
- ithoughts怎么自定义样式_博客园自定义样式
显示结果为: 类似的可以修改博客标题, 字体大小, 导航栏, 侧边栏等等. 公告栏 公告栏也可以添加很多自己喜欢的样式,而且可以添加时钟, 访问人数, 访问地区, 个人介绍等等 我这边引用了 hone ...
最新文章
- 计算机常用英语术语、词汇表(上)
- 基于SpringMVC下的Rest服务框架搭建【1、集成Swagger】
- pandas where 用法
- sts引入lombok_Spring Boot中lombok的安装与使用详解
- stm32f7linux,STM32F7串口5初始化失败
- OpenCV reshape函数需要注意的细节
- 47session 方法
- Problem G: 函数---判断日期(年月日)是否合法
- OpenCASCADE 麻花钻头造型实例分析
- 应用程序错误代码0xe06d7363怎么解决
- matlab求解集合覆盖问题,Set Cover Problem (集合覆盖问题)
- Google 投资了京东
- 《HBase权威指南》一3.4 行锁
- dell进入u盘启动模式_戴尔主板bios设置u盘启动
- MACD底背离选股公式——通达信、同花顺
- “网红直播+电商”是门好生意?直播的商品为什么这么好卖
- (四)Tensorboard学习——mnist_with_summaries.py
- bootstrap4 利用m- p-调整元素之间距离
- centos7无盘启动_centos启动tftp服务器
- Modbus协议应用纪实
热门文章
- boost::hana::detail::wrong用法的测试程序
- boost::filesystem模块打印文件状态的测试程序
- boost::exception的用法测试
- boost::checked_delete的测试程序
- ITK:Levenberg-Marquardt优化
- ITK:笛卡尔方位角高程
- DCMTK:缩放DICOM图像
- OpenCV使用dnn重新着色灰度图像的实例(附完整代码)
- OpenCV创建小部件Creating Widgets
- OpenCV HDF创建,写入和读取数据集