Linux后台传文件

7月 17, 2015 skyfish

有时候文件比较大，用scp命令远程复制时间比较久，需要scp命令在后台执行。

先执行命令

nohup scp -r /var/www/ root@server:/var/www/ > nohup.out 2>&1

然后按ctrl+z键停止进程

再执行命令

这时候scp命令就会在后台运行。放心关掉终端了。

上面这方法不是每个系统都适用。。。还是装screen，用screen命令靠谱。

阿里云主机新添加lvm格式硬盘步骤

7月 17, 2015 skyfish

查看分区列表

fdisk -l

创建pv

pvcreate /dev/xvdb

创建vg

vgcreate VolGroup00 /dev/xvdb

查看pv

pvdisplay

查看vg

vgdisplay

创建lv，使用100%磁盘

lvcreate -l +100%FREE -n lvdata VolGroup00

fdisk -l

创建文件系统ext3

mkfs -t ext3 /dev/mapper/VolGroup00-lvdata

挂载

mount /dev/mapper/VolGroup00-lvdata /var/www/

Threejs效果库

7月 12, 2015 skyfish

http://www.threejsgames.com/extensions/

绕过chrome的xss限制

7月 12, 2015 skyfish

?xx=<svg><script%20>/<1/>(function(){alert(1)})()</script></svg>

图片转素描效果

6月 8, 2015 skyfish

闲时弄了个图片转素描的效果，可以方便把图片转成线稿

var matrix:Array = [0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0, 0, 0, 1, 0];
var cmt:ColorMatrixFilter = new ColorMatrixFilter(matrix);
imgMc.filters = [cmt];//imgMc为舞台上命名为imgMc的元件

//获取灰度图片数据
var baseBmd:BitmapData = new BitmapData(imgMc.width, imgMc.height, false);
baseBmd.draw(imgMc);
var topBmd:BitmapData = baseBmd.clone();//获取灰度图片
topBmd.lock();
//对topBmd进行反相处理
topBmd.colorTransform(new Rectangle(0, 0, topBmd.width, topBmd.height), new ColorTransform( -1, -1, -1, 1, 255, 255, 255, 1));

//进行一次高斯模糊
topBmd.applyFilter(topBmd,topBmd.rect,new Point(), new ConvolutionFilter(3, 3, [1, 2, 1, 2, 4, 2, 1, 2, 1], 16.05));

//把topBmd与baseBmd进行颜色减淡叠加，并做一次阀值处理
var bw:int = topBmd.width;
var bh:int = topBmd.height;
for (var i:int = 0; i < bw; i++ ) {
        for (var j:int = 0; j < bh; j++ ) {
                var color1:uint = topBmd.getPixel(i, j);
                var color2:uint = baseBmd.getPixel(i, j);
                var red1:uint = color1 >> 16;
                var red2:uint = color2 >> 16;
                var redInt:uint = colorDodge(red1,red2);

                var newUint:uint = redInt << 16 | redInt << 8 | redInt;
                topBmd.setPixel(i,j,newUint);
        }
}
topBmd.unlock();

function colorDodge(topPixel:uint, basePixel:uint):uint {
        //结果色 = 基色 + (混合色 * 基色) / (255 - 混合色)
        var res:uint = 255;
        if (topPixel < 255) {
                res = basePixel + (topPixel * basePixel) / (255 - topPixel);
        }
        if (res < 250) {//阀值处理
                res = 0;
        } else {
                res = 255;
        }
        return res;
}
var bmp:Bitmap = new Bitmap();
bmp.bitmapData = topBmd;
addChild(bmp);

H5页面添加入场动画

6月 8, 2015 skyfish

在做移动端页面时候，在页面呈现之际需要一个好的体验，就需要对页面上的元素做一些处理，让元素动态显示出来，即添加入场动画。

添加入场动画有三种方式。

一、使用jquery的animate控制元素的位置等属性，如$(‘.obj’).delay(100).animate({‘left’:100},300,function(){});对不同的元素控制delay时间实现先后次序的动画。但这种方式在移动端页面上性能很低，不可取。

二、使用css3的transition属性。比如页面上有个class为obj的元素，设置css为

.obj{position:absolute;left:294px;top:12px;-webkit-transform:matrix(1,0,0,1,640,300) translateZ(0);opacity:1;}
.dis .obj{-webkit-transition:all 0.6s cubic-bezier(0,.8,.6,1);-webkit-transform:matrix(1,0,0,1,0,0) translateZ(0);opacity:1;}

在页面呈现时候给obj元素父节点添加class为dis，即动画开始呈现。通过设置transition的delay属性可以实现先后次序的动画。但这种方式实现的动画显示比较单一，因为相当于只有两个关键点，中间是补间动画，要实现复杂点的动画就不行了。优点就是实现比较简单，在不需要复杂呈现动画的页面可以采用这种方式。

三、使用css3的animation属性。比如页面上有个class为obj1，obj2的元素，设置css为

.obj1{position:absolute;left:42px;top:10px;opacity:0;-webkit-transform:translate3d(-640px,0,0);}
.obj2{position:absolute;left:42px;top:310px;opacity:0;-webkit-transform:translate3d(640px,0,0);}
.dis .obj1{opacity:1;-webkit-transform:translate3d(0,0,0);-webkit-animation:2s ani1_1 ease-out;}
.dis .obj2{opacity:1;-webkit-transform:translate3d(0,0,0);-webkit-animation:2s ani1_2 ease-out;}
@-webkit-keyframes ani1_1{
	0%{
		opacity:0;
		-webkit-transform:translate3d(-400px,-800px,0);
	}
	20%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	30%{
		opacity:1;
		-webkit-transform:translate3d(0,-30px,0);
	}
	40%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	100%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
}
@-webkit-keyframes ani1_2{
	0%{
		opacity:0;
		-webkit-transform:translate3d(0,-800px,0);
	}
	5%{
		opacity:0;
		-webkit-transform:translate3d(0,-800px,0);
	}
	25%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	35%{
		opacity:1;
		-webkit-transform:translate3d(0,-30px,0);
	}
	45%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
	100%{
		opacity:1;
		-webkit-transform:translate3d(0,0px,0);
	}
}

当需要呈现时候给父节点添加dis的class，则动画开始播放，在设置dis前，应该先给元素强行reflow一下，以便动画每次都执行，reflow可以采用设置offsetWidth的方式。animation设置动画时候统一设置一个时间，这里设置了2s，是为了统一管理动画的先后呈现，通过设置百分比的位置确定动画开始的时间可以方便控制显示的动画节奏。这种方式可以添加比较复杂的动画，但是缺点是添加比较麻烦，一个元素对应一个动画配置，需要时间投入。由于这种方式实现的动画体验比较好，在时间允许情况下推荐使用这种方式添加动画。

附上该方式实现的站点http://my.163.com/2015/wanted/

天鱼的博客