saber酱的抱枕

Excalibur!

@saber2天前

01/22
15:31
学习

动态设置rem使页面自适应缩放

在页面布局中,通过动态设置rem并使用rem设置宽高、大小,使得页面元素的宽高可以随设备宽度而变化,保持布局的一致性。

我们先在头部加入meta信息:

<meta name="viewport" content="width=device-width, initial-scale=1" />

然后使用JavaScript动态设置rem:

(function (doc, win) {
	var docEl = doc.documentElement,
	  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	  recalc = function () {
	      var clientWidth = docEl.clientWidth;
	      if (!clientWidth) return;
	      docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
	  };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

公式是这样的:

100 * ( 浏览器页面宽度 / 设计稿宽度 )

第一部分:100是什么

这个100其实是我们使用的rem基础值,等于设置html标签的font-size=100px,这样,1rem也就是100px。

当1rem为100px时,页面上所有元素设置宽高大小时都除以100,就得出了该元素的rem值。比如设计稿上300px宽的元素,用rem设置就是width=3rem。

1rem并不是非要设置为100px,我们也可以设置成别的,比如设置1rem=50px,那么300px的元素是6rem。我们一般取1rem=100px是为了方便计算。如果实际项目中计算页面元素的rem值时不是按1rem=100px来算的,则需要修改公式里的100为实际使用的1rem值。

第二部分:浏览器页面宽度 / 设计稿宽度 是什么

这个可以理解为页面在设备上的缩放比例。比如iphone 6 plus的设备宽度是414px,我们的设计稿是640px。

414/640=0.646875,得出我们的页面在iphone 6 plus上应该显示为设计稿大小的0.646875倍。

最后我们把rem的基础值与页面缩放比例相乘,得出实际使用的rem基础值。rem的基础值变了,页面上所有元素的宽高、大小也会随之改变,这样就达到了页面自适应的效果。
Read More →

动态设置rem使页面自适应缩放

@saber4天前

01/19
18:21
软件

【chrome扩展】获取哔哩哔哩视频的封面大图

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

前两天我做了个获取bilibili视频封面大图的chrome扩展,chrome浏览器及多数chromium内核的浏览器都可以使用。

安装本扩展后,在bilibili页面上,chrome的右键菜单里会多出本扩展的菜单。

如图:

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

您可在哔哩哔哩(bilibili)中的视频播放页面及视频播放列表上,打开右键菜单并点击本扩展的菜单项,以此来获取封面大图。

本扩展可以在各种视频列表/直播列表/番剧目录/排行榜列表等【任意视频的封面图】上右键获取封面图;也可在视频播放页面的任意位置右键获取。①

支持各种常见的列表,除了上图那样的列表,还有下面这些类型的列表(未全部列出):

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

在番剧目录页面(上图),在目录列表上(第几话)右键也可获取该话的封面。在其他外置会获取到番剧封面图(上面的大图)。

如果偶尔功能失效,刷新页面即可恢复正常。

由于是初版,可能存在一些纰漏,欢迎大家多提意见~


chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

扩展作者:雪见仙尊
扩展图标用的是loading画师某抱枕的图=。=
(saber酱真是太可爱啦~

chrome应用商店地址:
https://chrome.google.com/webstore/detail/egodkcidolldembjebmiepoibpahmllh

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率

对于非chrome浏览器,可是尝试使用crx文件安装,下载地址:
http://7xk7g2.com1.z0.glb.clouddn.com/bilibili%20cover%20image.crx


ps:获取的大图也是b站上的,如果封面图原本是很大的,但up上传时裁剪成了小尺寸,那我也无能为力。

如果本扩展获取到的封面图尺寸还是不够大,建议搭配一个以图搜图的扩展,在封面图上右键,即可以图搜图:

chrome 扩展 哔哩哔哩 bilibili b站 封面图 效率


①由bilibili官方发布的番剧(区别于up主上传的番剧),其播放页面不能获取封面图。如有需要可到该番剧的列表页获取封面图。up主上传的视频都可以在播放页面获取封面图。

【chrome扩展】获取哔哩哔哩视频的封面大图

@guest1周前

01/14
09:28
ACG 游戏

当年入宅神作 【G线上的魔王】

G线上的魔王

推荐我当年的入宅神作 INTJ人格必玩

【G线上的魔王】

赌上性命的——纯爱。

全篇游戏在现在看来并不长 也不充实 其中有许多场景并不真实 比如警方并不是这么做事的 画风也没现在这么好

但是剧情是无可比拟的厉害

主人公是一名只想着赚钱的被黑社会老大领养的孤儿 他的父母在仇人的奸计中全部丧生 结下不共戴天之仇

G线上的魔王

这位有着长发的转学生,名叫宇佐美春。她自称“勇者”。面对神出鬼没的"魔王",利用头脑打起了一场场斗智斗勇的攻防战。

而她,也正是在京介充满痛苦与无力的孩提时代中,帮助过京介的"勇者"。

时隔十年,京介是否还记得儿时的约定?

全篇围绕着一名神秘恐怖人物——代号“魔王”的人而展开,揭露他的真实身份就是此作真正的答案。

相关下载:

BT种子下载

硬盘版下载

汉化文件下载

OST下载

当年入宅神作 【G线上的魔王】

@saber2周前

01/9
08:00
学习

使用js的insertAdjacentHTML方法插入元素

以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。

appendChild:在父级元素内追加新元素。
insertBefore:在父级元素内的某个元素之前插入新元素。

但是这两个方法的参数只能接收元素对象,不能使用字符形式的html代码,而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。

insertAdjacentHTML可以将字符串形式的html代码(需要能解析为DOM元素)解析为一个节点,并将其追加到指定元素的指定位置。

insertAdjacentHTML方法的语法如下:

element.insertAdjacentHTML(position, text);

position参数有以下四个值(都是字符串形式):

beforebegin:在元素的开始位置之前插入。
beforeend:在元素的结束位置之前插入。
afterbegin:在元素的开始位置之后插入。
afterend:在元素的结束位置之后插入。

text参数则是字符串形式的html代码。

根据position参数,我们可以将新元素插入到到指定元素的四个位置:

使用js的insertAdjacentHTML方法插入元素

示例:

<div id="a">
	<div></div>
</div>
<script type="text/javascript" defer>
	var a=document.querySelector("#a");
	a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");
</script>

结果如下:

<div id="a">
	<a href="">xxx</a>
	<div></div>
</div>

insertAdjacentHTML方法的兼容性表现良好,主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法:

document.documentElement.insertAdjacentHTML

此外,由于insertAdjacentHTML是根据位置插入元素的,因此它不能把新元素插入到img、input等单标签元素里(想这么做的人才是有毛病吧)。

相关文档:《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》


ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。

insertAdjacentElement方法除了第二个参数是DOM节点(不能是字符串形式)外和insertAdjacentHTML方法都一样。

insertAdjacentText方法则只接收字符串格式的参数,并输出为字符串。其他地方也和insertAdjacentHTML方法一样。

使用js的insertAdjacentHTML方法插入元素

@saber2周前

01/8
12:45
学习

bilibili上使用的一个下雪效果

今天fgo开了圣诞活动,bilibili上的活动页面上下着雪,于是我把代码扒了下来。

这个下雪的js依赖jquery,实际使用中感觉效果一般←_←

<body style="background: #000;">
    <canvas class="snow-canvas" speed="1" interaction="true" size="8" count="40" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false"></canvas>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script src="http://static.biligame.net/fgo/event_santa/pc/js/snow.js?v=d659f803.js"></script>
    <script>
    	$(".snow-canvas").snow();
    </script>
    <style>
    	.snow-canvas { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
    </style>
</body>

demo如下:

效果不是很好……不过如果像活动页面那样,有背景图片什么的,瑕疵应该不会很明显。

bilibili上使用的一个下雪效果