自从HTML5还有CSS3草案公布以来，国内兴起了一股学习的热潮，再包括JS2，这些都是未来WEB前端所发展的方向。做为一个WEB前端人员，必需要时刻关注前沿知识，不然等待的只有淘汰。不过，就我在公司接触的一些项目的统计来看，IE6还是浏览器占有率的大头，超过半数。所以，想迎来全面支持html5/css3的时代，恐怕还是有点遥远。
言归正传，当前关于CSS3，有个挺有名的机器猫测试页面，说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下，实很大噱头在里面，不知是有意还是无意，造成了在IE各版本下表现不一的状况，好像有点故意打压IE的嫌疑，虽然我也不喜欢IE。其实总的说来，要么就是支持，要么就是不支持，其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3，而是用各自的私有属性来支持而已。
不过看完之后，突发其想，想画一个QQ企鹅。说干就干，花了半天的时间，我承认也有参考下机器猫的代码，但是这只企鹅在不同浏览器下没有那么多的形态，只有支持与不支持两种。如下：
IE9以下的IE版本，会是左边那种情况；FF等webkit内核的浏览器会是右边那种情况（opera下没有肚皮上的阴影），当然，版本不要太低。
虽然也没多少技术含量，但原创也辛苦。欢迎朋友们转载，但请标明出处。谢谢！
首先先赞一下咱的设计师，微调了一下一点点的失真都被她发现了。
其实做前端应该经常会碰到这个问题，对图片的缩放会产生失真，主要是体现在IE上了，图片会出现锯齿。在FF、chorme等浏览器上不存在问题，天生就可以对缩放的图片进行柔化。对于这个问题，有人提出过用 -ms-interpolation-mode: bicubic; 来解决，不过这是IE7的私有属性，对于当前仍然占大头的IE6还是不能撒手不管呀。
解决的方法就是：VML。VML是一种基于XML的语言，可能有些朋友会觉得很陌生，其实当你从WORD里复制一段内容直接粘贴到HTML里的话，发现多出来的那一些所谓的WORD的样式，那就是VML。VML的全称是The Vector Markup Language(矢量可标记语言)，从这个名字我们就能理解为什么它可以处理图片缩放失真的问题了。哎，在这里也不说太多了，其实本民工也不太熟，临时了解的一些而已了，嘿嘿。
VML是IE only的，不过刚才也说过了，在FF、chorme等浏览器上是没有这个问题的（另，IE8中也已经解决这个问题），也就是说解决了IE也就解决了这个问题了。我还是直接帖DEMO吧，我也是现学现卖了，对VML有兴趣的同学可以到这里看看 http://www.infowe.com/vml/
在这里还得说下，用IE打开的话，会看到两个图片的对比，而非IE的因为不支持VML所以只能看到一个图。而在实际应用中，应该通过后台程序判断当前的浏览器，然后选择是输出img还是v:image。
最后再说下，在不是很有必要的情况下，我觉得还是保证图片的原尺寸比较好，因为缩放的还是不及原尺寸的清晰。
先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。
这种星级的投票效果很常见，但是目前线上大多都是通过多张背景图切换来实现的，比如下面这种
感觉这种方法挺麻烦的，而且也不能精确地表示比如8.8这样的小数，所以自己写了个，感觉还挺不错，不多说了，先上代码：
这是用Jquery来写的，其中get_rate(88)就是分数，可以改变数值试试。提交的函数这里就没写了，只要在up_rate()里发个AJAX请求，取到返回值后再运行一下get_rate(rate)就OK了。
PS：刚才试了一下，点运行之后可能要刷新一下才看得到效果。
关于这个问题，目前网上大部分的代码都是只兼容IE的。因为之前实现这个功能都是用到了一个IE的控件。但前不久做一个任务的时候也碰到了这个需求，但是要全兼容，所以就找了一下，现在有了一种新的办法来解决这个问题，是通过一个FLASH来解决的。
原理其实很简单，是利用了AS3中的 System.setClipboard() 方法，因为是通过FLASH实现的，所以没有浏览器上的兼容性问题，用法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<SCRIPT type=text/javascript>
function copy(meintext) {
if (window.clipboardData) {
window.clipboardData.setData("Text", meintext)
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(meintext)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
alert('地址已经复制到您的剪贴板！');
}
</SCRIPT>
</head>
<body>
<input type="button" value="复制本文链接" onclick="javascript:copy(window.location.href);return false;" />
</body>
</html> |
其中的 src=”_clipboard.swf” ，路径换成你自己的路径，文件下载如下：
clipboard.rar
下面的这两个例子都跟滑动门有关，应该都算滑动门的延伸。
之前有在BI上看到有朋友发过斜角导航，觉得可以有更好的解决方案。但最近都很忙，两个月没有来更新内容了，今天抽了点时间写了个DEMO发上来，自己写的，如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了，直接发例子了，方法很简单，一看就明白的。有一点要注意了，图片的透明部分需要花点时间来处理了。
其实当真正理解到方法之后，就可以延伸出很多效果出来。比如说下面的这个步骤导航（名字是我随便起的），是我在某个实际项目中用到的一个效果，给大家参考下，其实还能再优化一些的。
哎，许久没运动，搬的那一天被抓去当苦力，到现在还有点肌肉酸痛呢。本人较为内敛，只是随手拿手机拍了些相片，也来晒一下了。
从底部看，好高哇！一共39层，据说有139米。老实说，我的第一感觉竟然是联想到了某款曾经用过的剃须刀-_-!
大厅里有个很大的螺旋梯，不过我还没走上去看过是什么样子。
这里是茶水间，看起来有点像吧台呢。
这里是会客区，挺休闲的，平时也可以来这里坐一坐。
办公区一角。其实我挺喜欢这面墙的！
在食堂吃的第一顿午餐，一般说来10元左右。虽然不算便宜，但相对来说也挺丰盛的，尚能接受。
食堂北区的视野不错，可以向外眺望。
每人的办公桌上都有一盆植物，说是要自己照顾，不知我会不会把它给养死了。
接下来是传说中团购价价值一千多元的办公椅，一定得给个特写先。坐起来的确挺舒服的，可以多方位地调节，还可以后仰比较大的角度，中午休息时躺着挺不错的。只是这个价格……
也不知这叫什么区了，挺休闲的，还有电视跟DVD。
还有高尔夫球哦！
随手拍的一张了，好像不怎么有感觉。
最后来一张露脸的吧！哎，桌上的Q哥Q妹好像都不理我。
