2011-4
17

页面复制的完美解决方案

类别: JS/Ajax, Xhtml/Css | 930 Views | 3条评论

之前有发过一篇有关兼容浏览器页面复制的文章，很早就有朋友反应说在某些情况下无效，当时却还没有怎么注意，后来自己要用的时候发现的确是有问题，查了一下原因，原来是FLASH版本的问题。现在的浏览器中FLASH版本基本上都升到10了，在FLASH10中，要有实际的点击动作才能触发复制，所以原来那个是就无效了。

当然，解决办法还是有的，在这里介绍一个：zeroclipboard。同样也是利用FLASH来实现的，所以浏览器的兼容性是没有问题的。

另外，现在很多项目都会用到jquery，用的时候需要注意，尽可能用$(window).load()，因为如果用$(document).ready()的话会有可能在还没被加载的情况下就运行了，会复制失效。对于用jquery框架的朋友，这里推荐一个专门针对jquery的版本：zClip。

2010-12
18

公司圣诞晚会，阿信的演唱视频

类别: 我的日志 | 1,662 Views | 10条评论

公司圣诞晚会已经结束了，依然是什么奖都没有中到。个人感觉总体上不如去年的节目好看，太多拼凑的歌舞剧，又也许是我不懂欣赏吧……。

相片是拍了不少，但由于座位不好，拍的全是屁股，就不发了。最后出场的嘉宾阿信（不是五月天那个，是原信乐团的主唱）还算比较给力，用破相机录了下视频，效果还凑和，放上来看一下。

《死了都要爱》

《海阔天空》

2010-7
20

CSS3测试之——QQ企鹅

类别: Xhtml/Css | 3,492 Views | 32条评论

自从HTML5还有CSS3草案公布以来，国内兴起了一股学习的热潮，再包括JS2，这些都是未来WEB前端所发展的方向。做为一个WEB前端人员，必需要时刻关注前沿知识，不然等待的只有淘汰。不过，就我在公司接触的一些项目的统计来看，IE6还是浏览器占有率的大头，超过半数。所以，想迎来全面支持html5/css3的时代，恐怕还是有点遥远。

言归正传，当前关于CSS3，有个挺有名的机器猫测试页面，说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下，实很大噱头在里面，不知是有意还是无意，造成了在IE各版本下表现不一的状况，好像有点故意打压IE的嫌疑，虽然我也不喜欢IE。其实总的说来，要么就是支持，要么就是不支持，其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3，而是用各自的私有属性来支持而已。

不过看完之后，突发其想，想画一个QQ企鹅。说干就干，花了半天的时间，我承认也有参考下机器猫的代码，但是这只企鹅在不同浏览器下没有那么多的形态，只有支持与不支持两种。如下：

IE9以下的IE版本，会是左边那种情况；FF以及webkit内核的浏览器会是右边那种情况（opera下没有肚皮上的阴影），当然，版本不要太低。

虽然也没多少技术含量，但原创也辛苦。欢迎朋友们转载，但请标明出处。谢谢！

提示：你可以先修改部分代码再运行。

2010-5
4

关于图片缩放失真的解决方法

类别: Xhtml/Css | 6,939 Views | 16条评论

首先先赞一下咱的设计师，微调了一下一点点的失真都被她发现了。

其实做前端应该经常会碰到这个问题，对图片的缩放会产生失真，主要是体现在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。

最后再说下，在不是很有必要的情况下，我觉得还是保证图片的原尺寸比较好，因为缩放的还是不及原尺寸的清晰。

2010-2
9

一个挺酷的星级投票效果

类别: JS/Ajax | 22,321 Views | 22条评论

先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。

这种星级的投票效果很常见，但是目前线上大多都是通过多张背景图切换来实现的，比如下面这种

star

感觉这种方法挺麻烦的，而且也不能精确地表示比如8.8这样的小数，所以自己写了个，感觉还挺不错，不多说了，先上代码：

提示：你可以先修改部分代码再运行。

这是用Jquery来写的，其中get_rate(88)就是分数，可以改变数值试试。提交的函数这里就没写了，只要在up_rate()里发个AJAX请求，取到返回值后再运行一下get_rate(rate)就OK了。

PS：刚才试了一下，点运行之后可能要刷新一下才看得到效果。

2010-1
1

兼容浏览器的页面复制代码

类别: JS/Ajax | 9,970 Views | 6条评论

关于此方法复制不成功的，请看这一篇：http://www.moondyzone.com/css/610.html

关于这个问题，目前网上大部分的代码都是只兼容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