网站静态文件获取
chrome的调试工具没有提供直接下载,最近发现有个谷歌插件叫做 Save All Resources
谷歌商店搜索安装后,打开开发者工具会增加一个Resources Saver的tab栏,点击按钮Save All Resources就可以下载所有静态文件了,原谅我今天才发现这么好的插件....
chrome的调试工具没有提供直接下载,最近发现有个谷歌插件叫做 Save All Resources
谷歌商店搜索安装后,打开开发者工具会增加一个Resources Saver的tab栏,点击按钮Save All Resources就可以下载所有静态文件了,原谅我今天才发现这么好的插件....
项目上需要实现一个无限向上滚动,并且不同透明度的动效,研究了一下transition-group,发现用起来确实非常方便.记录一下transition-group的使用方法.及demo源码.
transition-group 会渲染成一个真实标签,如tag="div" 渲染div标签.
给name属性赋值定义类名前缀,拿name="list"举例:
list-enter : 在元素插入的时候存在,再下一帧移除 (元素的初始状态设置)
list-enter-active : 在元素运动过程中始终存在
list-enter-to : 一开始元素插入时不存在,下一帧添加,在元素运动过程中始终存在(设置动画目标状态)
list-leave: 元素移除时立即生效,下一帧删除(元素删除的初始状态设置)
list-leave-active: 元素移除运动过程中始终存在
list-leave-to: 一开始元素移除不存在,下一帧添加(设置动画移除状态)
list-move: 非插入删除的元素都会存在
demo
<template>
<div class="context-wrap">
<div class="left-arrow arrow"></div>
<transition-group v-if="items !== null" class="list" name="list" tag="div">
<div class="list-item" v-for="item in items" :key="item.index">
{{item.name}}
<span style="color:#FFAD4B;">{{item.value}}</span>{{item.surfix}}
</div>
</transition-group>
<div class="right-arrow arrow"></div>
</div>
</template>
<script>
export default {
data () {
return {
sourceList: createList(), // 原始数据
delay: 3000,
items: null,
nextIndex: 1
}
},
mounted () {
this.items = this.copyList()
this.time = setTimeout(this.toggleIndex, 3000);
},
beforeDestroy () {
if (this.time) {
clearTimeout(this.time)
this.time = null
}
},
methods: {
copyList () {
let list = this.sourceList.map(t => {
return {
...t,
index: this.nextIndex++
}
})
return list
},
toggleIndex () {
let item = {
...this.items[0],
index: this.nextIndex++
}
this.items = [...this.items.splice(1, this.items.length), item]
this.time = setTimeout(this.toggleIndex, this.delay);
}
}
}
function createList () {
let list = []
for (let i = 0; i < 5; i++) {
let item = {
name: '国泰君安对客户A35666556Q强平',
surfix: '张',
value: i + 50
}
list.push(item)
}
return list
}
</script>
<style lang="scss" scoped>
.context-wrap {
width: 100%;
height: 90%;
margin-top: 5%;
margin-left: 20px;
display: flex;
overflow: hidden;
align-items: center;
position: relative;
.list {
width: 286px;
height: 280px;
.list-item {
margin-bottom: 15px;
width: 280px;
height: 40px;
border: 1px solid #071532;
font-size: 14px;
color: #000;
display: flex;
justify-content: center;
align-items: center;
transition: all 3s;
&:nth-child(1) {
opacity: 0.2;
}
&:nth-child(2) {
opacity: 0.5;
}
&:nth-child(3) {
opacity: 1;
}
&:nth-child(4) {
opacity: 0.5;
}
&:nth-child(5) {
opacity: 0.2;
}
&:nth-child(6) {
opacity: 0.2;
}
/** 插入过程 **/
&.list-enter-active {
}
/** 移除过程 **/
&.list-leave-active {
position: absolute;
}
/*** 开始插入、移除结束的位置变化 ***/
// 定义移除的元素目标状态
&.list-leave-to {
opacity: 0;
transform: translateY(-55px);
}
// 定义插入的元素初始状态.
&.list-enter {
opacity: 0;
transform: translateY(55px);
}
}
// 覆盖上面列表元素每个位置的透明度
.list-move {
&:nth-child(2) {
opacity: 0.2;
}
&:nth-child(3) {
opacity: 0.5;
}
&:nth-child(4) {
opacity: 1;
}
&:nth-child(5) {
opacity: 0.5;
}
}
/*** 元素定位改变时动画 ***/
// .list-move {
// transition: all 5s;
// }
}
}
</style>
前段时间项目需求要做闪烁点,感觉做的效果挺好看,就把这块代码独立出来了
github地址 https://github.com/aoobao/amap-flicker-marker
自己测了一下,同时1000个闪烁点性能还可以.
简单封装了一下vue组件方便vue调用,后面有时间可以试试用shader做渲染看性能,但是地图只要一移动,所有的顶点都得重新计算重新写入GPU,性能未必会快多少.
之前安装了virtualBox想装虚拟机学习一下shell,发现一直提示我主板不支持虚拟化,但是明显按照网上教程,已经在bios中设置开启虚拟化,并且在任务管理器性能选项卡中已经看到虚拟化已启用.
一直没有找到具体失败原因,后来没办法安装了VMware试试,发现VMware提示Device/Credential Guard 不兼容,需要禁用.
搜索了一下有很多办法,下面记录一下命令:
关闭 Credential Guard
bcdedit /set hypervisorlaunchtype off
开启
bcdedit /set hypervisorlaunchtype auto
关闭后再次打开virtualBox,发现问题果然解决了.软件的提示太不友好了...
1.走ipv6,但是现在路由器固件好多不支持,用手机流量可以,或者刷自己的路由器固件
2.走CDN代理:通过cdn代理网站,通过CDN中间服务器,可以代理自己网站,就可以正常访问了.
详细写一下2的步骤,以便将来查阅
webssh : https://tools.bartlweb.net/webssh/ 网页版的ssh,可以连自己的服务器
cdn服务器: https://www.cloudflare.com/ 一个国外的CDN服务器提供商,重点是可以免费申请一个域名
域名供应商: https://www.freenom.com/ 如果你没有自己的域名,可以通过这个供应商注册免费的域名
一键脚本:https://github.com/wulabing/V2Ray_ws-tls_bash_onekey 恩,是用来一键装nginx的.
下面记录一下步骤:
首先需要有一个自己的域名,没有的话去freenom域名供应商免费注册一个,这步不细说了.
通过webssh连上被墙服务器,输入命令安装nginx:
bash <(curl -L -s https://raw.githubusercontent.com/wulabing/V2Ray_ws-tls_bash_onekey/master/install.sh) | tee v2ray_ins.log
注意域名填自己的域名
根据提示一步一步往下走,然后启动服务:
systemctl start v2ray
systemctl start nginx
然后登录cloudflare添加域名(可以免费添加一个域名)
添加完域名后,会显示2个nameserver 域名解析服务器,把他放到自己的域名下即可
然后点击域名,选中DNS,添加域名,IP地址当然是自己的服务器.
然后过一段时间,打开自己的电脑浏览器,敲自己的域名,发现可以访问,说明服务器已经能够成功走CDN代理访问到里,
访问界面应该是:
如果有问题访问不了看下服务器的防火墙有没开,还有本地ping一下域名,看有没解析到一个IP
或者再等一会,CDN生效可能没那么快.
类型 ws 端口是 443 (tls默认443) 注意不是配置文件里面的那个端口!
传输设置: 额外路径在 /etc/v2ray/config.json里面找. HTTP头部: {"Host":"域名"}, tls里面全部打勾,域名也一样.