以下是 自定义生成SVG背景图案js插件特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义生成SVG背景图案js插件</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" type="text/css" href="css/demo2.css">
<!--[if IE 9]>
<script src="js/base64.min.js"></script>
<script src="js/typedarray.js"></script>
<![endif]-->
</head>
<body>
<div class="zzsc-container">
<header class="zzsc-header">
<h1>自定义生成SVG背景图案js插件</h1><br><br>
<div class="zzsc-demo center">
<a href="index.html" class="current">DEMO1</a>
<a href="index2.html">在线生成图案</a>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-12"><div id="bg-0" class="js-geopattern"></div></div>
</div>
<div class="row">
<div class="col-6"><div id="bg-1" class="js-geopattern"></div></div>
<div class="col-6"><div id="bg-2" class="js-geopattern"></div></div>
</div>
<div class="row">
<div class="col-6"><div id="bg-3" class="js-geopattern"></div></div>
<div class="col-6"><div id="bg-4" class="js-geopattern"></div></div>
</div>
<div class="row">
<div class="col-6"><div id="bg-5" class="js-geopattern"></div></div>
<div class="col-6"><div id="bg-6" class="js-geopattern"></div></div>
</div>
<div class="row">
<div class="col-6"><div id="bg-7" class="js-geopattern"></div></div>
<div class="col-6"><div id="bg-8" class="js-geopattern"></div></div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/geopattern.min.js"></script>
<script type="text/javascript">
var pattern1 = GeoPattern.generate('GitHub');
var pattern2 = GeoPattern.generate('zzsc');
var pattern3 = GeoPattern.generate('abcdefghji');
var pattern4 = GeoPattern.generate('makeinchina');
var pattern5 = GeoPattern.generate('sjfksdlfjlsdajflsa');
var pattern6 = GeoPattern.generate('sjkdkerwlncjdfhds');
var pattern7 = GeoPattern.generate('rngrjgkrjgkrg');
var pattern8 = GeoPattern.generate('cklzkcklasjdikasjdfois');
var pattern9 = GeoPattern.generate('12345678910abcdefg');
$('#bg-0').css('background-image', pattern1.toDataUrl());
$('#bg-1').css('background-image', pattern2.toDataUrl());
$('#bg-2').css('background-image', pattern3.toDataUrl());
$('#bg-3').css('background-image', pattern4.toDataUrl());
$('#bg-4').css('background-image', pattern5.toDataUrl());
$('#bg-5').css('background-image', pattern6.toDataUrl());
$('#bg-6').css('background-image', pattern7.toDataUrl());
$('#bg-7').css('background-image', pattern8.toDataUrl());
$('#bg-8').css('background-image', pattern9.toDataUrl());
</script>
</body>
</html>HTML代码(index2.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义生成SVG背景图案js插件</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" type="text/css" href="css/demo1.css">
<!--[if IE 9]>
<script src="js/base64.min.js"></script>
<script src="js/typedarray.js"></script>
<![endif]-->
</head>
<body>
<div class="zzsc-container">
<header class="zzsc-header">
<h1>自定义生成SVG背景图案js插件</h1><br><br>
<div class="zzsc-demo center">
<a href="index.html">DEMO1</a>
<a href="index2.html" class="current">在线生成图案</a>
</div>
</header>
<div id="bg-0" class="js-geopattern"></div>
<div id="bg-1" class="js-geopattern"></div>
<input type="text" id="string" value=" 在这里输入文字... " autocomplete="off" />
<a id="save" href="#">保存图案...</a>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/geopattern.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>JS代码(demo.js):
var next = (function (){
var which = 0;
return function (){
return{
prev:which,next:which = (which + 1) % 2}
;
}
;
}
());
// Hook and debounce input eventfunction onChange($el,cb){
var last = $el.val();
$el.on('input',function (){
var val = $el.val();
var oldVal;
if (last !== val){
oldVal = last;
last = val;
typeof cb === 'function' && cb.call($el,val,oldVal);
}
}
);
return{
trigger:function (){
typeof cb === 'function' && cb.call($el,$el.val(),last);
}
}
;
}
var fadeOptions ={
duration:100,queue:false}
;
var canvas = document.createElement('canvas');
var saveButton = document.getElementById('save');
function prepareDownload(string,pattern){
if (!canvas){
canvas = document.createElement('canvas');
}
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(img,0,0);
saveButton.download = string + '.png';
try{
saveButton.href = canvas.toDataURL('image/png');
}
catch (err){
// The above is a security error in IE,so hide the save buttonsaveButton.style.display = 'none';
}
}
;
img.src = pattern.toDataUri();
}
var changeEvent = onChange($('#string'),function (val){
var pattern = GeoPattern.generate(val);
var bg = next();
$('#bg-' + bg.next).css('background-image',pattern.toDataUrl()).stop().fadeIn(fadeOptions);
$('#bg-' + bg.prev).stop().fadeOut(fadeOptions);
prepareDownload(val,pattern);
}
);
// Some browsers persist field values between refresh$(function (){
$('#string').val(' 在这里输入文字... ').focus();
changeEvent.trigger();
}
);
JS代码(svg.js):
'use strict';
var extend = require('extend');
var XMLNode = require('./xml');
function SVG(){
this.width = 100;
this.height = 100;
this.svg = new XMLNode('svg');
this.context = [];
// Track nested nodesthis.setAttributes(this.svg,{
xmlns:'http://www.w3.org/2000/svg',width:this.width,height:this.height}
);
return this;
}
module.exports = SVG;
// This is a hack so groups work.SVG.prototype.currentContext = function (){
return this.context[this.context.length - 1] || this.svg;
}
;
// This is a hack so groups work.SVG.prototype.end = function (){
this.context.pop();
return this;
}
;
SVG.prototype.currentNode = function (){
var context = this.currentContext();
return context.lastChild || context;
}
;
SVG.prototype.transform = function (transformations){
this.currentNode().setAttribute('transform',Object.keys(transformations).map(function (transformation){
return transformation + '(' + transformations[transformation].join(',') + ')';
}
).join(' '));
return this;
}
;
SVG.prototype.setAttributes = function (el,attrs){
Object.keys(attrs).forEach(function (attr){
el.setAttribute(attr,attrs[attr]);
}
);
}
;
SVG.prototype.setWidth = function (width){
this.svg.setAttribute('width',Math.floor(width));
}
;
SVG.prototype.setHeight = function (height){
this.svg.setAttribute('height',Math.floor(height));
}
;
SVG.prototype.toString = function (){
return this.svg.toString();
}
;
SVG.prototype.rect = function (x,y,width,height,args){
// Accept array first argumentvar self = this;
if (Array.isArray(x)){
x.forEach(function (a){
self.rect.apply(self,a.concat(args));
}
);
return this;
}
var rect = new XMLNode('rect');
this.currentContext().appendChild(rect);
this.setAttributes(rect,extend({
x:x,y:y,width:width,height:height}
,args));
return this;
}
;
SVG.prototype.circle = function (cx,cy,r,args){
var circle = new XMLNode('circle');
this.currentContext().appendChild(circle);
this.setAttributes(circle,extend({
cx:cx,cy:cy,r:r}
,args));
return this;
}
;
SVG.prototype.path = function (str,args){
var path = new XMLNode('path');
this.currentContext().appendChild(path);
this.setAttributes(path,extend({
d:str}
,args));
return this;
}
;
SVG.prototype.polyline = function (str,args){
// Accept array first argumentvar self = this;
if (Array.isArray(str)){
str.forEach(function (s){
self.polyline(s,args);
}
);
return this;
}
var polyline = new XMLNode('polyline');
this.currentContext().appendChild(polyline);
this.setAttributes(polyline,extend({
points:str}
,args));
return this;
}
;
// group and context are hacksSVG.prototype.group = function (args){
var group = new XMLNode('g');
this.currentContext().appendChild(group);
this.context.push(group);
this.setAttributes(group,extend({
}
,args));
return this;
}
;
JS代码(xml.js):
'use strict';
var XMLNode = module.exports = function (tagName){
if (!(this instanceof XMLNode)){
return new XMLNode(tagName);
}
this.tagName = tagName;
this.attributes = Object.create(null);
this.children = [];
this.lastChild = null;
return this;
}
;
XMLNode.prototype.appendChild = function (child){
this.children.push(child);
this.lastChild = child;
return this;
}
;
XMLNode.prototype.setAttribute = function (name,value){
this.attributes[name] = value;
return this;
}
;
XMLNode.prototype.toString = function (){
var self = this;
return ['<',self.tagName,Object.keys(self.attributes).map(function (attr){
return [' ',attr,'="',self.attributes[attr],'"'].join('');
}
).join(''),'>',self.children.map(function (child){
return child.toString();
}
).join(''),'</',self.tagName,'>'].join('');
}
;
CSS代码(demo1.css):
body,html{margin:0;padding:0;width:100%;height:100%;background:#7f7f7f;}
.js-geopattern,#string{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;z-index:5;}
input{text-align:center;color:#f7f7f7;background:rgba(0,0,0,0);border:0;outline:0;text-shadow:0 0 5px rgba(255,255,255,0.75);font-size:30pt;}
input::-ms-clear{display:none;}
#save{position:absolute;bottom:0;width:100%;text-align:center;text-decoration:none;color:white;font-size:18px;line-height:36px;font-weight:200;background:rgba(255,255,255,0.1);z-index:8;}
#save:hover{background:rgba(255,255,255,0.75);color:black;}
CSS代码(demo2.css):
body,html{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}
.center,.container{margin-left:auto;margin-right:auto}
*{font-family:Lato,Helvetica,sans-serif;line-height:1.5}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.375rem}
h4{font-size:1.125rem}
h5{font-size:1rem}
h6{font-size:.875rem}
p{font-size:1.125rem;font-weight:200;line-height:1.8}
.font-light{font-weight:300}
.font-regular{font-weight:400}
.font-heavy{font-weight:700}
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.justify{text-align:justify}
.container{width:90%}
.row{position:relative;width:100%}
.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}
.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:96%}
.col-1-sm{width:4.33%}
.col-2-sm{width:12.66%}
.col-3-sm{width:21%}
.col-4-sm{width:29.33%}
.col-5-sm{width:37.66%}
.col-6-sm{width:46%}
.col-7-sm{width:54.33%}
.col-8-sm{width:62.66%}
.col-9-sm{width:71%}
.col-10-sm{width:79.33%}
.col-11-sm{width:87.66%}
.col-12-sm{width:96%}
.row::after{content:"";display:table;clear:both}
.hidden-sm{display:none}
@media only screen and (min-width:33.75em){.container{width:80%}
}
@media only screen and (min-width:45em){.col-1{width:4.33%}
.col-2{width:12.66%}
.col-3{width:21%}
.col-4{width:29.33%}
.col-5{width:37.66%}
.col-6{width:46%}
.col-7{width:54.33%}
.col-8{width:62.66%}
.col-9{width:71%}
.col-10{width:79.33%}
.col-11{width:87.66%}
.col-12{width:96%}
.hidden-sm{display:block}
}
@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}
}
.js-geopattern{height:300px;}
/*body,html{margin:0;padding:0;width:100%;height:100%;font-family:sans-serif;background:#7f7f7f;}
.js-geopattern,#string{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;}
input{text-align:center;color:#f7f7f7;background:rgba(0,0,0,0);border:0;outline:0;text-shadow:0 0 5px rgba(255,255,255,0.75);font-size:30pt;}
input::-ms-clear{display:none;}
#save{position:absolute;bottom:0;width:100%;text-align:center;text-decoration:none;color:white;font-size:18px;line-height:36px;font-weight:200;background:rgba(255,255,255,0.1);}
#save:hover{background:rgba(255,255,255,0.75);color:black;}
*/
CSS代码(zzsc-demo.css):
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.zzsc-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{position:absolute;top:0;left:0;width:100%;padding:1em 190px 1em;letter-spacing:-1px;text-align:center;z-index:10;}
.zzsc-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#fff;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.zzsc-header{padding:3em 10% 4em;}
.zzsc-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.zzsc-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.zzsc-header h1{font-size:1.2em;}
}
分享到QQ
分享到微博
微信扫一扫
