html5表单元素input新增了一个color类型，也就是颜色选择器。 {代码...} 该选择器在windows上的默认效果如下： 可以说非常难看并且难用了。 为了解决这个问题，xy-ui新增了一类组件xy-color-picker，效果如下： 设计参考chorme颜色选择器。 是不是从视觉上就提升了一大截呢 下面来看看具体使用。 建议查看文档，可以实时...

原生img的痛点 最近，xy-ui新增了一类组件xy-img，主要目的是为了代替原生img标签，解决了原生img在使用时通常会用一些问题 加载失败的默认显示 无法直接设置图片比例 无法懒加载（最新chrome可能支持，不完善） 无法点击查看大图 下面来看实际使用： 建议查看原文，可以实时交互 使用方式 使用方式很简单 {代码...} 或...

xy-ui xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档 风格参考Ant Design、Metiral Design。 github项目地址 文档 该文档基于docsify动态创建，文中所有组件均为可交互实例。 现集成gitalk评论系统，有相关问题可在下方评论区留言。 特性 跨框架。无论是react、vue还是原生项目均可使用。 组件...

CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。

原文地址，排版效果更好 [链接] [链接] 在平时的项目中会经常碰到这样一种布局，暂且称之为多级菜单吧 （截图来自于ant-design） 这类布局也很容易，大概就是这样ul和li嵌套，如下 {代码...} 于是就得到下面一个很原始的样式。 再经过简单的修饰就可以达到上面的效果了。 当然，这个很容易，一般情况下我们是通过设置内...

:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

css3中实现动画一般有两种方式，一个是transition过渡，一个是animation动画。最主要区别就是transition需要条件触发，通常会用hover来触发，而animation则更灵活，可以自动播放，也可以通过条件触发。

这是一个纯css实现的红白机模拟器，没有使用到任何图片，如下图所示 同时支持移动端横竖屏模式 竖屏 横屏 项目地址 [链接] 下面对该样式中的疑难点总结一下。 反向圆角 这一部分采用radial-gradient完成 {代码...} 也就是从transparent到#da4a4a的渐变，这里的临界值没有完全重叠，重叠会在谷歌浏览器产生一个很明显的锯...

项目地址 [链接] 概要 这是一个半自动化的键盘访问解决方案，主要适用于需要完全键盘操作场景，比如大屏展示，电视，游戏菜单等，大大简化按键操作的逻辑。 焦点使用虚拟焦点，也就是通过添加.focus等class实现，而不是原生自带的:focus，更利于定制化需求。 基于HTML页面。 比较冷门，键盘交互方向，不感兴趣的可以跳过...

这算是第一次写年终总结吧，当然公司的除外。 这一年收货很多，做出的东西很比较多，下面总结一下。 1.可编辑布局系统 这是一个公司内部布局系统，支持层级，可以通过拖拽的方式形成网页，暂时不公开 2.服务器和域名 5月份首次购买了服务器，当然只是学生优惠套餐尝鲜，然后完全搭建了自己的个人博客 项目地址:[链接] 个...

最近，在项目DYTT集成了热更新，简单来说，就是不用重新下载安装包即可达到更新应用的目的，也不算教程吧，这里记录一下。 1.热更新方案 目前网上大概有两个比较广泛的方式，分别是 react-native-pushy react-native-code-push 前者是由ReactNative中文网推出的代码热更新服务，后者是由微软老大哥推出的，当然不仅仅是...

电影天堂React Native 客户端 重新开始！ 具体更新以[链接]为准。 重新开始 两年前发布了第一个版本。 现在， 使用最新的react-native 0.57和全新的设计完成了V2.0 免责声明 本项目仅供学习交流使用，不得用于其他商业行为，数据来源于第三方网站，与本人无关 为什么要重新开始呢 有很多小伙伴发邮件问我为什么之前的项...

一直觉得网易云音乐的用户体验是很不错的，很早就注意到了里面的鲸鱼音效，如下图，就是一个环形的跟着音乐节拍跳动的特效。gif动图可能效果不太理想，可以直接在手机上体验身为前端凭着本能的好奇心和探索心当然会研究一番，如何在页面上实现该效果？1.AudioContext其实这类动效原理并不复杂，你需要一堆数据来表述每一...

关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于react和antd，里面用到了国际化，使用方式也很简单 {代码...} 然后，页面所有的官方组件都变成了中文（默认是英文）。 如果你使用其他工程，也有相应的解决方...

首先看一个效果，注意地址栏的变化 然后思考一下，用CSS如何实现？ CSS选择器的局限 选择器是CSS中的一大特色，用于选择需要添加样式的元素。 选择器的种类有很多，比如 元素选择器 {代码...} 类选择器 {代码...} ID选择器 {代码...} 属性选择器 {代码...} 后代选择器 {代码...} 相邻兄弟选择器 {代码...} 这里只列举了...

现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样 {代码...} 这里的alt属性是为了当图片加载失败时告诉用户图片信息的 能不能美化一下呢？ 下面给出几种方式 js 方式 相信大家碰到这种问题是，搜索的结果一般都是用图片的onerror方法 onerror 事件会在文档或图像加载过程中...

最近应该发现，我的博客https://blog.codelabo.cn左下角多了一个音乐播放器 这个是怎么实现的？一起来看看吧 APlayer 首先我们需要一个音频播放器，这里我用到了APlayer，这是由bilibili前端大神DIYgod开源的播放器，有兴趣的可以去TA的主页看看，非常惊艳，这里我就不多说了 我们看一下APlayer的官方文档，方法很简单 {...

在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。

这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。

我们经常在手机上看到通讯录列表，这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单，就是两个列表 {代码...} 然后加点样式 {代码...} 这样就可以看到布局了 [链接] 实现吸顶效果 吸顶效果其实很简单，只要用到css中的新属性position:sticky就可以了 粘性定位元素（st...

身为前端，本来是拒绝使用nginx的，想着nodeJs能够大一统。不过在反向请求代理，二级域名配置等方面还是比不上nginx。最关键的一点就是，明明搜索的node配置https，然后不知不觉就变成了nginx配置htpps，如下

起初，是打算直接用 [链接]作为博客的访问地址的，后来想到把自己的其他项目也放到改域名下，所以决定改造成 主域名作为一个入口，分别进入到不同的项目，比如 [链接]、[链接]、[链接]...类似这样的分支。

js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆，特别是substring()和substr()，连方法名都差不多，下面就具体来看一下区别。

参看原文有更好的排版效果哦 codelabo小程序是该博客的小程序版本，现在已经成功上线1个多月了，现在推广一下 小程序码 主要实现功能 codelabo小程序主要实现了web版的基本功能，包括文章列表，归档，分类，搜索，详情等功能，体验基本与web版一致。 功能截图 首页 归档 分类 关于 搜索 详情 不足之处 markdown解析用的...

居中是平时工作中的最常见的一种需求，各种图片居中或者各种弹窗，水平居中还好，特别是垂直居中，很多初学者表示太难写了，现在列举一些常用的方法。

2021-3-30 更新以下内容已过时，推荐查看这篇文章 [链接]，实现更加简洁完美前言我们在平时的网页中，经常会见到这样的优惠券或者其他的券（特征就是会有反方向的圆角）。可能大部分前端人员为了简单，直接采用图片的方式，直接把整张图作为背景。其实这也没什么不好的，简单，方便，还没有兼容性问题，ie6跑起来都没得...

我们今天用css来实现一个常见的tab切换效果 查看原文可以有更好的排版效果哦 先看效果 [链接] 前言 哪些简单的效果可以考虑用css来实现呢，目前css能够做的交互有 鼠标经过/离开：hover 鼠标点击：:cheked 那是不是上述所有的交互都可以用css来实现呢？显然不是的，css实现依赖于html结构，因为css选择器有限，有子选择...

题外话 查看原文可以有更好的排版效果哦 从后面开始，文章中的代码演示会用Codepen来替代。 这样做的好处有 方便自己对所写过的demo进行统一的管理 方便文章中的展示，前面都是直接在文章中嵌入html代码和css样式，这样就会造成css样式名的冲突，前面的解决方式就是不断的重新命名 star、star01、star02等等这些 方便转...

本项目中所用的api来自Windows10电影天堂UWP(作者邮箱：<hengshuixu@foxmail.com>;)通过Fiddle抓包工具所得， 项目中所有内容的一切权利属于电影天堂UWP，本项目所有内容及代码仅供私下学习参考，不得作为其他用途。