initial.js 生成类似 Gmail 头像的 jQuery 插件 - 文章教程

initial.js 生成类似 Gmail 头像的 jQuery 插件

发布于 2020-10-12 字数 2009 浏览 1250 评论 0

initial.js 是一个很小的插件,使用随机的颜色填充背景,效果类似于 Gmail 头像显示。

initial.js 生成类似 Gmail 头像的 jQuery 插件

浏览器兼容

  • Chrome
  • Firefox
  • Opera 9+
  • Safari 3.2+
  • iOS Safari 3.2+
  • Android Browser 3+

使用方法

Markup

<img data-name="Steve" data-color="#85e0ce" class="profile"/>

jQuery code

$('.profile').initial();

可选参数

下面的选项可以用图像元素中的数据属性覆盖。参考相关数据的 data-attribute 列每个选项的属性。

Option data-attribute Description Default
name data-name 用户名称 Name
height data-height 图片高度 100
width data-width 图片宽度 100
charCount data-char-count 截取用户名中的几个字符显示到图片上 1
textColor data-text-color 文字颜色 #ffffff
fontSize data-font-size 文字大小 60
fontWeight data-font-weight 文字粗细 400
radius data-radius 圆角 0
seed data-seed 将背景颜色随机化的数字 0
color data-color 应该生成的配置文件图片的背景色 null

github 地址:https://github.com/judesfernando/initial.js

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0