资讯专栏INFORMATION COLUMN

纯JS实现KeyboardNav(学习笔记)二

msup / 2717人阅读

纯JS实现KeyboardNav(学习笔记)二

</>复制代码

  1. 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写

  2. 这篇主要是添加css,优化js编写逻辑和代码排版

  3. GitHub项目源码

  4. 预览地址

最终效果

KeyboardNav使用指南:

左下角为网站的icon,"."代表网站无icon或未设置网站

按键盘上相应的按键进入对应网站

鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies

清空cookies后保存在本地的网站将被清除,还原会初始状态

CSS样式

美化按键

</>复制代码

  1. /*美化按键*/
  2. /**/
  3. /*}*/
  4. .kbd{
  5. margin: 0;
  6. padding: 0;
  7. border:0;
  8. width: 65px;
  9. height: 50px;
  10. /*线性渐变:0-70白色,70-100,fff-f3f3f3渐变*/
  11. background: linear-gradient(to bottom, #fff 0%,#fff 70%,#f3f3f3 100%);
  12. border-radius: 7px;
  13. /*下方阴影,box-shadow5个最常用属性,分别是左偏移,右偏移,模糊,扩张,颜色*/
  14. box-shadow: 0 5px 0 0 #D8DCDE;
  15. color: #767D81;
  16. font-family: Helvetical;
  17. vertical-align: top;
  18. /*用flex布局居中*/
  19. display: inline-flex;
  20. align-items: center;
  21. justify-content: center;
  22. }
  23. .kbd_wrapper{
  24. display: inline-block;
  25. vertical-align: top;
  26. /*这两句一定要搭配使用!!!!*/
  27. width: 65px;
  28. height: 55px;
  29. /*border:1px solid #3C3C3D;*/
  30. border-radius: 7px;
  31. margin: 0 5px;
  32. /**/
  33. box-shadow: 0 4px 3px 0 #3C3C3D,0 0 1px 0 #3C3C3D;
  34. /*下,一圈*/
  35. }

一定要记住写vertical-align: top;;避免inlineblock的bug

</>复制代码

  1. display: inline-block;
  2. vertical-align: top;
  3. /*这两句一定要搭配使用!!!!*/
CSS3中vh vw 单位的使用

参考:
张鑫旭时许相关单位vw vh

css3参考手册-vh
vh:viewport height
vw:viewport width

</>复制代码

  1. “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

    相对于视口的高度。视口被均分为100单位的vh

用flex布局绝对居中的三句话套路

在父元素上写

</>复制代码

  1. /*绝对居中父元素上的三行代码*/
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
100%浏览器高度+绝对居中方法

100%浏览器高度方法:

</>复制代码

  1. html,body{
  2. height: 100%;
  3. }

100%浏览器高度+绝对居中方法

</>复制代码

  1. main{
  2. /*绝对居中父元素上的三行代码*/
  3. display: flex;
  4. justify-content: center;
  5. align-items: center;
  6. /*高度为浏览器高度*/
  7. height: 100vh;
  8. }
background

MDN

</>复制代码

  1. background: red url("./wall.jpg") no-repeat center center scroll;

red是当图片还没有被加载出来的时候的背景颜色

缩放背景图像-拉伸与覆盖

CSS 的 background-size 属性能调整背景图片的大小,从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图

</>复制代码

  1. background-size:150px;

设置背景图片大小宽高都为150px,并平铺

特殊值: "contain" 和 "cover"
contain:锁定比例的平铺,高宽自适应浏览器大小
例如:

cover:完全覆盖,让背景自适应

使用谷歌开发者工具模拟慢网速的环境

这时候背景图片加载不出来,先会使用背景属性中的红色

favicon.ico

如果想访问icon就去网站根目录下的favicon.ico,大部分网站适合.

</>复制代码

  1. imgxxxx = document.createElement("img");
  2. if(hash[row[index2]]){//判断这个是否存在
  3. imgxxxx.src = "http://"+hash[row[index2]]+"/favicon.ico";
  4. //加http协议,不然会认为是路径
  5. } else{//undefined
  6. //如果src为空,就会进入当前的网址,导致图片显现不出来,所以给他一个存在的图片
  7. imgxxxx.src = "./point.png";
  8. }

插入icon

效果:

onerror事件

监听请求失败事件

添加img get请求的onerror方法,当出现个天使白,就将图片变成.

</>复制代码

  1. imgxxxx.onerror = function (ev) {
  2. //onerror事件,监听img的get请求错误事件
  3. ev.target.src = "./point.png";
  4. //把没有请求到的错误事件的src定为那个点
  5. };

编辑网址时,可以改变键盘里的图标

</>复制代码

  1. button2 = jfglkhj.target;
  2. img2 = button2.previousSibling;
  3. img2.src = "http://"+x+"/favicon.ico";
  4. img2.onerror = function (ev) {
  5. ev.target.src = "./point.png";
  6. };

var声明一个变量

如果不加var,那么变量就是全局变量.

优化代码

给每一块代码添加函数,将代码由线性的变成


优化代码结构,将代码由线性变为树形.这样在代码出错的时候便于修改,能很快找到BUG的地方,只需要一层层的去找,无需看全部的代码

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94479.html

相关文章

  • JS实现KeyboardNav(学习笔记)

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 预览地址 最终效果 showImg(https://sfault-image.b0.upaiyun.com/202/564/2025649432-5adb193d75ef2_articlex); ...

    Muninn 评论0 收藏0
  • JS实现KeyboardNav(学习笔记)一

    摘要:取正值时,阴影扩大取负值时,阴影收缩。默认为,此时阴影与元素同样大。如果没有指定,则由浏览器决定通常是的值,不过目前取透明。 纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 showImg(https://sfault-image.b0.upaiyun.com/...

    source 评论0 收藏0
  • JS实现KeyboardNav(学习笔记)一

    摘要:取正值时,阴影扩大取负值时,阴影收缩。默认为,此时阴影与元素同样大。如果没有指定,则由浏览器决定通常是的值,不过目前取透明。 纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 showImg(https://sfault-image.b0.upaiyun.com/...

    lscho 评论0 收藏0
  • SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

    摘要:函数式编程,一看这个词,简直就是学院派的典范。所以这期周刊,我们就重点引入的函数式编程,浅入浅出,一窥函数式编程的思想,可能让你对编程语言的理解更加融会贯通一些。但从根本上来说,函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程(Functional Programming),一...

    csRyan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<