目录
移动端滚动:
window.onscroll = function() {
//为了保证兼容性,这里取两个值,哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
}
// 下面的写法移动端不兼容
window.addEventListener('scroll', () => {
}
VScode设置背景图片
找到程序 Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css
修改css文件可以摆脱设置背景图插件的局限性,可以自由DIV
VScode的多数样式使用了bootstrap建议不要去改
/* 局部设置:显示在代码编写的页面里,不包含菜单栏和工具栏建议使用png抠图效果更佳 */
body {
background-image: url('file:///C:/Users/../../xxxx.png');
background-size: 20%;
background-position: 100% 100%;
opacity: 0.75;
background-repeat: no-repeat;
}
/* 全局设置:包含整个VScode窗口(包含活动栏,不包含状态栏),背景图设置为电脑显示屏比例大小效果更佳 */
body {
background-image: url('file:///C:/Users/../../xxxx.png');
background-size: 100%;
opacity: 0.75;
background-repeat: no-repeat;
}
/* 通过CSS动画属性 达到背景图的切换*/
/* 缺点:图片路径和播放顺序,时间都要在文件里配置*/
body {
background-size: 100%;
opacity: 0.75;
background-repeat: no-repeat;
animation: myfirst 50s infinite;
}
@keyframes myfirst{
0%{
background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg0.jpg');
}
20%{
background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg1.jpg');
}
40%{
background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg2.jpg');
}
60%{
background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg3.jpg');
}
80%{
background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg4.jpg');
}
100%{
background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg5.jpg');
}
}
打开开发者工具方便调试:帮助(H)> 切换开发人员工具
推荐插件 background-cover
after伪元素图标
空心三角箭头
<span class="arrow"></span>
.arrow:after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #656565;
border-right: 1px solid #656565;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
上下左右可以通过border和transform: rotate调节
×关闭图标
<span class="close"></span>
.close{
display: inline-block;
width: 14px;
height: 1px;
background: #95835e;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
层叠顺序
Stacking Order
background/border
z-index < 0
block
float
inline/inline-block
z-index:auto/z-index:0
z-index > 0
Vuex替代方案
Vuex在页面刷新时会重置存在本地相对稳定
// 存
localStorage.setItem("objName", JSON.stringify(data));
// 取
JSON.parse(localStorage.getItem("objName"));
// 删
localStorage.removeItem("objName");