2024-06-19 厉飞雨 阅读(124) 评论(0) 赞(5)

在网页设计和开发过程中，将 HTML 和 CSS 代码转换为图像文件是一个常见需求。无论是为了分享设计效果图，还是生成素材用于其他项目，Html2Image 都能为您提供便捷的解决方案。通过在线代码编辑器，您可以轻松地将 HTML 和 CSS 代码转换为即时预览的图像，并可以下载存储为 SVG、PNG 和 JPEG 格式的图像文件。 Html2Image 是一个在线工具，它提...

2024-06-09 厉飞雨 阅读(85) 评论(0) 赞(4)

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

2024-06-09 厉飞雨 阅读(91) 评论(0) 赞(5)

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

2024-06-09 厉飞雨 阅读(155) 评论(0) 赞(8)

<p style="box-sizing: border-box; margin-top: 20px; margin-bottom: 20px; color: rgb(33, 37, 41); font-family: &quot;Open Sans&quot;, -apple-system, BlinkMacSystemFont, &q...

2024-06-08 厉飞雨 阅读(74) 评论(0) 赞(4)

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

2024-06-08 厉飞雨 阅读(126) 评论(0) 赞(5)

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

2024-06-08 厉飞雨 阅读(101) 评论(0) 赞(5)

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

2024-06-08 厉飞雨 阅读(96) 评论(0) 赞(5)

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

2024-06-08 厉飞雨 阅读(75) 评论(0) 赞(5)

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

2024-06-08 厉飞雨 阅读(156) 评论(0) 赞(7)

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