2010-2
9

一个挺酷的星级投票效果

类别: JS/Ajax | 5,949 Views | 2条评论

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

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

star

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

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

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

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

2010-1
1

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

类别: JS/Ajax | 7,906 Views | 5条评论

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

2009-11
15

斜角导航及滑动门的延伸

类别: Xhtml/Css | 8,726 Views | 6条评论

下面的这两个例子都跟滑动门有关，应该都算滑动门的延伸。

之前有在BI上看到有朋友发过斜角导航，觉得可以有更好的解决方案。但最近都很忙，两个月没有来更新内容了，今天抽了点时间写了个DEMO发上来，自己写的，如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了，直接发例子了，方法很简单，一看就明白的。有一点要注意了，图片的透明部分需要花点时间来处理了。

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

其实当真正理解到方法之后，就可以延伸出很多效果出来。比如说下面的这个步骤导航（名字是我随便起的），是我在某个实际项目中用到的一个效果，给大家参考下，其实还能再优化一些的。

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

2009-9
12

搬进腾讯大厦了，我也来晒一晒图~~

类别: 我的日志 | 12,461 Views | 17条评论

哎，许久没运动，搬的那一天被抓去当苦力，到现在还有点肌肉酸痛呢。本人较为内敛，只是随手拿手机拍了些相片，也来晒一下了。

txdd022b

从底部看，好高哇！一共39层，据说有139米。老实说，我的第一感觉竟然是联想到了某款曾经用过的剃须刀-_-!

dtt1

大厅里有个很大的螺旋梯，不过我还没走上去看过是什么样子。

p9100035

这里是茶水间，看起来有点像吧台呢。

p9100034

这里是会客区，挺休闲的，平时也可以来这里坐一坐。

p9100036

办公区一角。其实我挺喜欢这面墙的！

p9100042

在食堂吃的第一顿午餐，一般说来10元左右。虽然不算便宜，但相对来说也挺丰盛的，尚能接受。

p9100050

食堂北区的视野不错，可以向外眺望。

img007

每人的办公桌上都有一盆植物，说是要自己照顾，不知我会不会把它给养死了。

img010p9100030

接下来是传说中团购价价值一千多元的办公椅，一定得给个特写先。坐起来的确挺舒服的，可以多方位地调节，还可以后仰比较大的角度，中午休息时躺着挺不错的。只是这个价格……

p9100070

也不知这叫什么区了，挺休闲的，还有电视跟DVD。

p9100071

还有高尔夫球哦！

img008

随手拍的一张了，好像不怎么有感觉。

img_4431

最后来一张露脸的吧！哎，桌上的Q哥Q妹好像都不理我。

2009-9
4

使用动态scritp标签解决跨域读数据的问题

类别: JS/Ajax | 1,529 Views | 4条评论

来到TX后第一个比较正式的任务就是做一个活动页面。页面就不说了，活动页面嘛，那个线条啊只能大块大块地切图了。然后就是因为数据量并不多，所以采用了用静态页然后通过JS去读数据的做法。然后就碰到了跨域的问题了。

我想肯定有很多朋友也会碰到这样的情况，对方只给出一个链接让你去取数据，通过传递不同的参数，返回不同的数据。如果是在本域的话，用AJAX是很方便的，但AJAX不能跨域。而iframe的方法也不实用，只能跨小域，还需要在双方页面加相应的函数，页面里多了那么一块也让人感觉不舒服。所以决定用动态script标签的方法来解决这个问题。

在这里想说一句，国内的业内环境真是…，网上查出来的技术文章几乎都是同样的几篇转来转去，而且也说得不清不楚的很费解。还是BI上环境好些，呵呵。下面的代码并非我原创，也是参考来的，但我一定讲解清楚，让每一个看这文章的人都能明白具体是如何实现的。

由于浏览器安全的问题，一些跨域的请求都会被拒绝，当然，你也可以设置为添加到信任站点就能访问，但你不可能要求你的每个用户都去这样添加。但是，也有个例外，JS是可以跨域的，比如说我们用jquery的时候，可以加载code.google.com里面的jquery包，同样也能应用到jquery的框架；再比如说一些流量统计的代码，都是加一段JS在页面，我们就能应用到写在里面的函数了。所以，当我们把我们所以跨域读取的地址写在script标签的src里的时候，不管是什么后缀名的文件，都会被当做一个JS来读取。所以呢，这个页面的输出要采用JS的格式。

在这里先说两点，第一是这个方法名字虽然是叫动态script标签，但是你静态地直接写在页面里也是可以的，前提是你不需要动态地传递参数；第二是在很多文章里会把此方法跟json扯上关系，其实这跟json没有任何关系，只是因为用json来处理某些返回值时比较方便罢了。下面还是用json格式的来说明好了，因为这样的应用可能会比较多一点。

首先我们新建一个页面，可以是ASP、PHP或者CGI，或者TXT也都可以，但是让他的输出像这样：

var MyJSON = {
   'info': [{'name' : 'moondy','sex' : '男','age' : '28'}]
};

这里定义了一个json，你也可以这样定义：

var name="moondy";
var sex="男";
var age="28";

喜欢怎样写就怎样写了，只是在有多组数据的时候，用json比较方便了。关键是要用var ，这样才能当做一个JS的变量来读取，此方法的主要思想，就是在你的页面动态地加入了一句变量的定义，而你就可以直接在JS中引用这个变量了。下面是JS部分：

var element = document.createElement("script");
function createScript(compId,dataId){        
        element.src = "http://www.moondyzone.com/json.php";//这里是你需要跨域读取的URL
        element.type = "text/javascript";
        element.language = "javascript";
}
function writeContent(){
        alert(MyJSON[0].name);//可以看到读取了相应的数据，json的操作跟数组类似了。这里就可以直接读取上面var定义的变量了。
}
window.onload = function(){
        createScript(1,2);//这里的这个参数是在需要动态传递参数的时候用的，本例中没有用到，看具体的需要了。
        document.getElementsByTagName("head")[0].appendChild(element);
}
if(document.all){
        element.onreadystatechange = function(){//IE用
                var state = element.readyState;
                if (state == "loaded" || state == "interactive" || state == "complete") {
                        writeContent();
                }
        };
} else {
        element.onload = function() {//FF用
                writeContent();
        };
}

在这里就没有做DEMO了，本人在实际项目中应用都没有问题的了。另外也可以跟据不同的需求进行修改，比如说例子中element.onreadystatechange 是在加载完成后运行，可以自行改为点击触发之类的也都可以咯。不过有一点要注意，动态改变外域的URL时需要刷新页面，直接重写script标签中的src在IE中会读不到。

2009-8
16

a:hover在IE6中的BUG

类别: Xhtml/Css | 1,072 Views | 4条评论

哎，最近工作太忙，都好久没来写点东西了。

这也是最近工作中碰到的一个问题，其实以前也经常碰到过。具体是这样的，有一个图片链接，为了有明显一些的提示效果，需要在鼠标移上去的时候把它放大。按思路来说，其实是很容易的，只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上，在IE6中，a:hover img{}里定义的内容并不生效。

IE6对伪类的支持真的很烂，除了A标签外其它标签都不支持:hover伪类，而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性：

a:hover {zoom:1;}/*这里可以换成其他很多的属性。*/
a:hover img {……}

在网上找出的答案基本上都是这样，的确这样能解决问题，但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout，但经过试验，不能触发layout的属性也能生效，比如说color、border之类的。也就是这一次，我才找到此BUG的原因所在：当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题，至于定义什么值就看具体情况了，至少可以不用zoom这个看起来有hack嫌疑的属性咯。