51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

前端开发

JS 根据文章中的标题生成目录索引

JS 根据文章中的标题生成目录索引

厉飞雨 阅读(86) 评论(0) 赞(4)

在浏览一些博客或 wiki 类网站的时候,你可能会发现在文章的开头或侧边会有一个目录,点击就可以跳转到指定的章节。对于比较长的文章来说,目录还是比较重要的。通过目录可以快速了解文章包含的内容,要查看某个章节也可以直接跳转。 最近准备给博客增加一个生成文章目录的功能,下面简单写一下实现方式。 代码 --- 我这里使用了 jQuery,代码如下: ``` //  给 h2 ...

使用原生 JavaScript 实现简单轮播图

使用原生 JavaScript 实现简单轮播图

厉飞雨 阅读(94) 评论(0) 赞(5)

轮播图是网站中常见的一种展示方式,一般常用于:电商网站、新闻网站、企业官网 等。轮播图也是前端开发必须掌握的基础。这里就用 CSS3 + 原生 JavaScript 实现一个简单的轮播图。 注意!因为使用了 CSS3 ,所以不能在 IE10 以下的浏览器运行。 代码 --- HTML: ``` <div id="box">     <...

JavaScript 使用 QRious 生成二维码

JavaScript 使用 QRious 生成二维码

厉飞雨 阅读(76) 评论(0) 赞(4)

在我的博客文章页下方有一个分享按钮,点击就会生成一个二维码,可以使用手机扫描查看和分享。生成二维码的过程还是比较复杂的,完全靠自己手写的话还是不太现实,最方便的就是使用其他人写的 JS 库。生成二维码的 JS 库还是比较多的,我的需求就是不需要依赖 jQuery 之类的库,可以直接下载文件调用,也可以使用 npm 安装。 QRious 是一个生成二维码的 JS 库,它基本符合...

关于自定义模态对话框的可访问性问题

关于自定义模态对话框的可访问性问题

厉飞雨 阅读(127) 评论(0) 赞(5)

在浏览器中包含三个可直接用 JS 调用的对话框,这三个对话框分别是 `alert` 、`prompt` 、`confirm` 。这三个对话框无论是对于键盘还是屏幕阅读器的可访问性都支持的比较好。但是因为这三个对话框在不同浏览器下的效果都不一样,所以很少有网站会用这三个对话框,大多数网站都会使用自定义对话框。 但是国内大多数网站的自定义对话框可以说是没有做过任何可访问性方面的适...

使用 social-share.js 给网站加入快速分享到社交网站的功能

使用 social-share.js 给网站加入快速分享到社交网站的功能

厉飞雨 阅读(102) 评论(0) 赞(5)

最近准备给博客增加一个一键分享到新浪微博的功能。看了一下新浪微博 API 的说明发现特别麻烦,还需要涉及到实名认证之类的,最终只能放弃。 在逛 Github 的时候发现一个能实现分享网站到 新浪微博、QQ空间、QQ好友、Facebook ...... 的 JS 库。有了这个 JS 库我就没必要再去每个平台注册 API。 Github 地址:<https://githu...

前端路由的简单实现

前端路由的简单实现

厉飞雨 阅读(97) 评论(0) 赞(5)

因为 AJAX 的出现诞生了单页应用这种网页类型,单页应用简单的说就是前端通过 AJAX 加载和动态改变 DOM 内容来切换页面,网页本身并不会刷新和跳转。像 [YouTube](https://www.youtube.com/) 、[Google Play](https://play.google.com) 、[网易云音乐](https://music.163.com/) 等...

使用 CSS3 + JavaScript 简单实现元素的淡入淡出

使用 CSS3 + JavaScript 简单实现元素的淡入淡出

厉飞雨 阅读(77) 评论(0) 赞(5)

在jQuery中想实现淡入淡出的功能很简单,只需要通过 `fadeIn()` 和 `fadeOut()` 这两个方法就能实现淡入淡出,如果是原生JS就会稍微麻烦一些,只能通过定时器来控制CSS的透明度来实现淡入淡出。但是通过JS来控制CSS的透明度有一个很大的问题,过渡不够流畅,尤其对于配置低的电脑和手机比较明显。 在CSS3中有一个 `transition` 属性 可以直接...

highlight.js 一个在网页上实现代码高亮的JS库

highlight.js 一个在网页上实现代码高亮的JS库

厉飞雨 阅读(157) 评论(0) 赞(7)

highlight.js 是一个能在前端页面实现代码高亮显示的 JS 库,目前支持 197 种语言的代码高亮,同时也支持 246 种高亮配色样式,主流的 IDE 和编辑器效果都能实现。 highlight.js 也是目前使用最多的代码高亮 JS 库,我博客的代码高亮使用的也是 highlight.js,这里就简单写一下 highlight.js 的使用。 highlight...

NuxtJS使用vue-i18n实现国际化多语言切换,快速上手

NuxtJS使用vue-i18n实现国际化多语言切换,快速上手

厉飞雨 阅读(142) 评论(0) 赞(8)

写在文章开头:现在csdn真的是越来越垃圾了,我就没见过这么垃圾的网站,教程就TM写一半,最关键的东西不写,东西说得含含糊糊的,还尼玛好意思收费。呀屎拉你! 这篇文章是我在Nuxt学习过程中的整理,最近用这玩意做完了一个联系项目,也算是积累了不少的东西,其中多语言切换因为csdn教程带偏的缘故花费了额外的时间,虽然不复杂,其实也没有记录的必要,但是我就是想全部发出来,让那些...