大猫 (Madao) - まるでダメなおっさん

Tag Archives

8 Articles

Yabo(鸭脖) – CSS 压缩合并工具

by bigCat 30 Comments

如果你用过 YUI Compressor 压缩 CSS,那么你应该知道怎么吃鸭脖

命名

压缩 + Combo = Yabo(鸭脖)

先看Yabo(鸭脖)用法:

主样式叫 buy_v2.css 里头有import 2个零碎的 qb.css 和 mod.css (支持跨目录跨引号跨注释跨妹纸)

右键选择 Yabo.js 或者快捷键 我设置为了 ctrl+s 这个在 Intellij IDEA 里因为自动保存而快被遗忘的快捷键

生成 buy_v2.min.css 已经是包含了 mod.css 和 qb.css 和 buy_v2.css 并且用 YUI Compressor 压缩到了一行

就是这么个小东西啦, 之前一直用强大的 CSSGaga,

但是由于不支持传参,  又懒得新开个软件做压缩, 加上自己需求没那么复杂,就搞鸭脖了

Intellij IDEA / PHPStorm 配置

先看教程 WebStorm 使用外部工具 ,再看具体例子

因为 Yabo 是基于 JScript 开发,所以 Program 是宿主文件 wscript(windows only) 参数的话一共要2个

  1. Yabo.js 的路径
  2. $FilePath$ 当前文件路径

运行目录设置为 $FileDir$ 当前文件所在目录

通过 Github 下载

https://github.com/damao/Yabo 基友已经在开发 jar 版本,到时候就可以跨平台,期待一个

—已经添加了PPT到github上,有兴趣下载看看—————

CSS3动画-彩虹列表

by bigCat 30 Comments

昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡
于是抄袭了一个分享出来,嘿嘿

要体验的同学可以用 chrome 在俺 blog 侧边里看到
鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉


颜色可以用 Photoshop 拉好渐变取色

ul a,
ul:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);}
ul a{-webkit-transition: all 1s ease-in-out;}
ul:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;}
ul:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;}
ul:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;}
ul:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;}
ul:hover li:nth-child(5) a {color:#C75E81;-webkit-transition-duration: .6s;}
ul:hover li:nth-child(6) a {color:#C7A236;-webkit-transition-duration: .5s;}
ul:hover li:nth-child(7) a {color:#C7C40D;-webkit-transition-duration: .4s;}
ul:hover li:nth-child(8) a {color:#B8C10F;-webkit-transition-duration: .3s;}
ul:hover li:nth-child(9) a {color:#A2AD22;-webkit-transition-duration: .2s;}
ul:hover li:nth-child(10) a {color:#767954;-webkit-transition-duration: .1s;}

代码就这样子,结合了 艺术网的一个例子 < 推荐这个名字很土的假中国鬼子网站...

(无修正)给页面加Loading

by bigCat 97 Comments

大家先来跟我学一个单词

那就是传说中的[無修正]!

跟着老师念: mo xiu sei (拼音第一声)

好,接下来我要对阿呜(aw)同学的那篇给页面加上Loading效果最简单实用的办法做一下修正

阿呜的方法系酱紫滴
建立一个div,一个css,一个js
div就素那一坨字

 
假装在异步加载ing...

css就素那一抹红

#loading{
	z-index:1;
	padding:5px 0 5px 9px;
	background:#c44;
	left:0;
	top:0;
	width:90px;
	color:#fff;
	position:fixed;
}

js让丫消失(用的jquery框架,推荐大家使用)

 

大猫同学进行了再一次的艺术加工处理
原html没啥子缺点,文案要改的话自由发挥
原css缺点:ie6不支持的position:fixed,再说ie也不支持圆角
考虑js去fixed成本太高,这里推荐加上float属性
原因是如果loading和大猫一样是竖着来的,不float会很挫
假若横着,float了也不错

#loading {
	-moz-border-radius-bottomright:5px;/* FF专用圆角属性 */
	float:left;/* 横竖都不挫 */
	width:26px; /* 如果你也想盲目跟风就修改width和height和padding */
}

原js消失方式是突然来那么一下
身为一枚老师,是绝对不允许早x的
so
这里采用了jquery.hide的参数slow(ie6下效果尤佳)

 

具体写法可以参照俺的common.js
jquery真是所有男人的福音啊