常用脚本demo搜集整理

忙了好几天，以至于看到电脑有种莫名的心理障碍。明天就是伟大滴国际劳动节了，下午不太想工作，而是想整理一下这段日子接触过的一些比较有用的，常用的脚本。光知道完成任务而没有总结和积累是不行滴。因为一旦停下来，就随时有可能忘光光。


图片等比例缩放

DIV等高处理

Javascript 切换页面 CSS 样式

图片放大镜效果

1KB的JS TAB脚本 帕兰映像

图片先模糊后清楚 以前一直不知道这样做的意义所在，现在终于懂了，笨。

CSS解决未知高度垂直居中的问题——IE6/IE7/FF3测试正常

项目组同事反映前阵子做的一个登录界面在IE7下登录框神秘消失了。自己查看了一下汗了一把，不但IE7不能正常显示，FF3.0.3也是如此。

翻查了之前的技术博客记录和相关资料，发现原来的解决方法已经outdate了。小修正了一下，整理如下：

针对的问题主要是未知高度垂直居中。

XHTML：

<div id="outer">

    <div id="middle">

        <div class="greenBorder" id="inner">

        </div>

    </div>

</div>

CSS:

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer{height: 100%;width:100%;overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}/*for FF*/
#middle{position:absolute;top:50%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}/*for FF*/
#inner{position: relative;top:-50%;width: 250px;margin: 0 auto;}
*+html #outer[id] {position: relative;} /* for IE7 */
*+html #middle[id] {position: absolute;} /* for IE7 */

另：这里有一句话解决IE8兼容问题的，没试过，地址在这里：http://eroading.com/web-frontend-develop/ie8-compatible-solve

那些对互联网有梦想的人。。。

常常还是会遇到一些认识或不认识的，对互联网有着激情和梦想的人。看到他们时觉得很感慨。我对一切坚持自己梦想的人都心存敬意，无论他们在现实中成功与否。我问自己跟他们之间，除去能力本身（我觉得其实每个人的智力水平相差都不远，关键不在这里），区别究竟是在哪里。后来我觉得，区别在于对于互联网也好，对于这个世界也罢，我从来都只是一个——没有梦想的梦想者。28年来我的目标一直是零，我的梦想也是零。我对互联网有感情，对技术有热情，我也懂得在理想的状态下，为用户创造价值，就是在为自己创造价值，但是这一切似乎都跟我的梦想无关，换句话说我没有勇敢实践的绝对激情。我只会是在某个时期，某个际遇底下，用尽全力，什么也不管不顾地去做到最好，为的是某天可以毫无后悔地放弃它。

丸子三兄弟之2

图片垂直居中的使用技巧——淘宝的方法

原文地址

在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。

题目的难点在于两点：
垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

.box {
 /*非IE的主流浏览器识别的垂直居中的方法*/
 display: table-cell;
 vertical-align:middle;

 /*设置水平居中*/
 text-align:center;

 /* 针对IE的Hack */
 *display: block;
 *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
 *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

 width:200px;
 height:200px;
 border: 1px solid #eee;
}
.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

<div class="box">
 <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：

• 《Vertical centering using CSS》


• 《Vertical centering using CSS》（标题和上同，内容不同）


• 《CSS List Grid Layout》


• 《Vertical Middle》 通过添加一无语义图片来解决图片居中问题，源自韩国Yahoo

一个photoshop小技术点的记录

画一个圆角矩形，添加上需要的样式。



选择转换点工具，选中左下角的锚点。右键 - 自由变换点。



在菜单栏更改参考点位置为左下角。编辑 - 变换点 - 水平翻转。



对圆角矩形右边做同样处理，就得到上图的效果。这种效果多用于导航菜单。

四月以来居然忙到啥都没留下。软件项目已经收尾，看着自己一开始设计的UI慢慢变得面目全非，应该说对软件界面我是无任何控制能力的，PS图纸是一回事，做出来是另一回事，一点小的细节变动，就影响整体感觉，也影响用户体验；但是由于在项目组里的尴尬处境，我自觉对此无能为力。我同时自觉很像一个总务人员，开发部每个人都需要找到我，又并不很需要与我良好沟通关于该项目的事。我直接只对老板负责，除了没有多余的油水。

软件项目到最后我剩下的只有这套比较完整的像素图标，有点简陋，不过是自己第一次完整独立做出来的，纪念如下，以兹鼓励：