当前位置：首页 > 网页特效 > 背景

geopattern-可生成漂亮的SVG背景图案的js插件

分类：背景日期：2024-05-14 点击(4) 评论(0)

简介

使用该插件需要在页面中引入jquery（可选）和geopattern.min.js文件。

```html
<script src="js/jquery.min.js"></script> 
<script src="js/geopattern.min.js"></script>  
```                
#####  HTML结构
如果你要要一个容器设置背景图案，例如一个div容器。

```html
<div id="geopattern"></div>
```
#####  初始化插件
可以使用下面的方法来生成背景图案，传入的字符串是任意的，不同的字符串会生成不同的图案。

```html
var pattern = GeoPattern.generate('GitHub');
$('#geopattern').css('background-image', pattern.toDataUrl()); 
```              
或者通过jQuery来调用插件。

```html
$('#geopattern').geopattern('GitHub');         
```         
#####  API
- GeoPattern.generate(string, options)：返回一个新的背景图案。
- - string：使用SHA1算法来生成哈希值，生成的哈希值用于生成背景图案的种子。
- - options.color：指定精确的背景颜色。CSS十六进制颜色值。
- - options.baseColor：用于控制生成背景图案颜色的基本颜色。CSS十六进制颜色值。
- - options.generator：生成的图案。所有的基本图案可以参考这里。- 
- Pattern.color：获取背景图案的颜色，返回一个十六进制的字符串。
```html
GeoPattern.generate('GitHub').color // => "#455e8a"
```
- Pattern.toString() 和 Pattern.toSvg()：获取图案的SVG字符串。
- Pattern.toBase64()：以Base64编码的方式获取SVG图案。
- Pattern.toDataUri()：以data URI的方式获取SVG图案。例如：data:image/svg+xml;base64,PHN2ZyB...。
- Pattern.toDataUrl()：作为CSS background-image属性的值方式来获取SVG图案。

web299.com

geopattern-可生成漂亮的SVG背景图案的js插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果