2015年8月

CSSLab:踏踏实实的给css做实验

一个小点子。

很多时候一些css属性想测试一下,都是F12在开发者工具里面弄的。这么弄没有保留性,也不方便展示。

看张鑫旭大牛的博客感觉自己做一个css的小实验室插件还不错,于是就弄了这么个小插件:CSSLab,项目用gulp构建。

总功能代码才几十行而已= =。

原理是,在内容模板(content.jade)上写好你需要的内容,需要控制的部分赋一个id(较规范的话要以 lab- 开头),然后 new一个CSSLab,参数为id值。

之后是功能函数,你需要绑定一个需要修改的值的话,只需要使用addVar这个函数就行。

addVar : function(info,attr,type,options)

info:绑定变量的信息,比如“父元素背景色”,“子元素字体大小”

attr:绑定的属性,css在DOM的style属性里面的参数,如“backgroundColor”,“fontSize”

type:如何控制这个属性值,滚动条的话就range,文字域就text,下拉菜单就options(此处应该会改成select

options:控制参数。

options根据不同的type有不同的写法:
range:{
u : "计量单位如%/px/em,没有就不填",
min : "最小值",
max : "最大值"
}
text:{
u : "计量单位如%/px/em,随意就不填"
}
options:{
u : "计量单位如%/px/em,没有就不填"
o : ["选项1","选项2","选项3"]
}

我在仓库的example里面做好了一个案例,目前就是这样。

有一个想法,整合起这些奇怪的小问题做更多的实验,然后真的弄一个CSSLab出来。

如果真的弄了这个,我会给它买域名CSSLab.wang,站点名就是汪君的CSS实验室哈哈哈哈。

日常脑洞-文字双色切割(什么鬼

脑洞地址:Q,Q

日常开脑洞。写的时候关于用什么position做了好长时间实验,感觉应该写个专门的框架做可视化实验了2333。

(没错我只是单纯的想膜拜一下张鑫旭大牛的css实验大法

canvas七夕粒子特效

效果:(咩哈哈哈哈)点击屏幕即可开始显示动画,点一下一句话。

睡不着,于是爬起来总结一下。

首先我用的依旧是createjs。这个框架我用的不是很娴熟,没怎么翻过手册,只用了easelJs和tweenJs的极少部分函数。

前边的一些点动画,构建起来很麻烦,所以我加上了计数器,包括段落计数、字数计数、高度计数。这个时候深深的感受到了函数式编程思想。如,把单个字形成的函数包裹起来,返回它形成之后的左侧边位置以便于下一个字的位置计算——然后再用更大的函数包裹形成字的函数,让每句单独形成。

同时为了在手机端看,这个canvas我设置了自动高度,宽度1000码而填充100vw。vw/vh这两个单位在实际使用中并不是特别好用,它对应的是屏幕的尺寸,也就是innerWidth/innerHeight这两个属性的百分比,通常做一屏幕大小为一页的设计的时候,这个单位可以在很大程度上减少百分比的使用,也方便嵌套与计算。(说起这两个单位,还是Rakume菊苣告诉我的2333)

这个canvas有以下几个弊端是我犯了懒得改的:

  1. 直接加载createjs完整库,大小将近两百kb,对于加载是个不小的坑;
  2. 点位没有用数组控制,每次clear屏幕都要检索全局,效率不高;
  3. 在手机qq内嵌浏览器中,因为我用了自动高度,所以它会按照浏览器内高来调整canvas高,可是伐开森的是,浏览器因为上下俩功能条,导致屏幕可下滑,为了达到最好的效果需要只单机屏幕上半部分。

想拿去用的话,修改js文件的那个数组就好,注意当前只支持大写字母。
——————分割——————

今天研究了一下后端……写了一晚上登陆模块感觉自己真是2透了。。。因为是为了写nodejs的博客系统,单人登陆,所以var一个对象就能搞定数据,然而在set cookie的时候还是卡壳了,果然写的逻辑还是有问题。

英文字母、数字的5*5点状化坐标

闲的没事干,想起了之前想过的一个canvas效果,其中有一步是把每个数字以点状的形式组成。教程中提供了一个包含0-9数字的js文件,文件中是一个以0和1表示数字形象的二维数组。

通过这个思路,想到也可以直接把每个字母以二维数组的形式储存它的图形。

于是有了这个:5x5wordList.js

数组名:WORDLIST

数组现有内容:

  1. 英文大写字母A-Z
  2. 数字0-9

有空再增加其他内容,用这个简化canvas获取字符图形的一些步骤。

获取中文字符的逻辑之前没做好,生成的数组过大导致计算效率低下,这个问题正在解决中。