initial.js
简单的jQuery插件,以使Gmail像文字图片一样制作gmail
Demo
Browser compatibility
- Chrome
- Firefox
- Opera 9+
- Safari 3.2+
- iOS Safari 3.2+
- Android Browser 3+
Usage
Markup
<img data-name="Steve" data-color="#85e0ce" class="profile"/>
jQuery code
$('.profile').initial();
Options
Below options can be overridden with data-attributes inside the image element. Refer to the "data-attribute" column for related data-attribute for each option
Option | data-attribute | Description | Default |
---|---|---|---|
姓名 | data-name | 应生成个人资料图片的用户名 | Name |
高度 | data-height | 图片高度 | 100 |
宽度 | data-width | 图片宽度 | 100 |
字符数 | data-char-count | 图片中显示的字符数。 | 1 |
文字颜色 | data-text-color | 文字颜色 | #ffffff |
字体大小 | data-font-size | 字符的字体大小 | 60 |
字体粗细 | data-font-weight | 字符的字体粗细 | 400 |
半径 | data-radius | 圆角 | 0 |
种子 | data-seed | 用于随机化背景颜色的数字 | 0 |
颜色 | data-color | 应该生成的个人资料图片的背景颜色 | null |
Hover.css 是一个免费CSS库,可使用悬停效果轻松应用动画。