jquery ajax教程网 http://www.jqueryajax.com 关注前端技术－jquery、ajax、json Tue, 15 May 2012 02:59:09 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 vi/vim 命令示意图 http://www.jqueryajax.com/jquery/1826.html http://www.jqueryajax.com/jquery/1826.html#comments Fri, 11 May 2012 05:18:28 +0000 小朱 http://www.jqueryajax.com/?p=1826

]]> http://www.jqueryajax.com/jquery/1826.html/feed 0 友好的内容方格排列方式，jquery.masonry插件 http://www.jqueryajax.com/jquery/1814.html http://www.jqueryajax.com/jquery/1814.html#comments Tue, 08 May 2012 05:57:52 +0000 小朱 http://www.jqueryajax.com/?p=1814

要用到的jqurey插件：jquery.masonry.min.js

实例下载和使用方法：masonry-site-demo

调用方法：$('#container').masonry({ itemSelector: '.box' });

]]> http://www.jqueryajax.com/jquery/1814.html/feed 0 Javascript 生成指定范围数值随机数 http://www.jqueryajax.com/jquery/1804.html http://www.jqueryajax.com/jquery/1804.html#comments Thu, 12 Apr 2012 04:53:59 +0000 小朱 http://www.jqueryajax.com/?p=1804 1. 从1开始 至 任意值

linenum
parseInt(Math.random()*上限+1);

2. 从任意值开始 至 任意值

linenum
parseInt(Math.random()*(上限-下限+1)+下限);

上面的公式使用了 parseInt(), 因此要加1; 如果使用 Math.ceil() 则不需要加1, 俺习惯于这样写…

1. 演示1 (直接进行生成随机数操作)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    <script type="text/javascript">
    //<![CDATA[
        window.onload=function(){
            var n=na=nb=nc='';
                n=parseInt(Math.random()*10+1);
                na=parseInt(Math.random()*(20-11+1) + 11);
                nb=parseInt(Math.random()*100+1);
                nc=parseInt(Math.random()*(100-51+1) + 51);
 
            var o=document.getElementsByTagName('input');
                o[0].value=n;
                o[1].value=na;
                o[2].value=nb;
                o[3].value=nc;
        } // shawl.qiu script
    //]]>
    </script>
    1-10: <input type="text" /><br />
    11-20: <input type="text" /><br />
    1-100: <input type="text" /><br />
    51-100: <input type="text" /><br />

2. 演示2 (写成函数进行生成随机数操作)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    linenum
    <script type="text/javascript">
    //<![CDATA[
        window.onload=function(){
            var o=document.getElementsByTagName('input');
                o[0].value=fRandomBy(10);
                o[1].value=fRandomBy(11, 20);
                o[2].value=fRandomBy(1, 100);
                o[3].value=fRandomBy(51, 100);
        }
 
        function fRandomBy(under, over){
            switch(arguments.length){
                case 1: return parseInt(Math.random()*under+1);
                case 2: return parseInt(Math.random()*(over-under+1) + under); 
                default: return 0;
            }
        }  // shawl.qiu script
    //]]>
    </script>
    1-10: <input type="text" /><br />
    11-20: <input type="text" /><br />
    1-100: <input type="text" /><br />
    51-100: <input type="text" /><br />
]]> http://www.jqueryajax.com/jquery/1804.html/feed 0 javascript 模拟滚动条 http://www.jqueryajax.com/jquery/1791.html http://www.jqueryajax.com/jquery/1791.html#comments Mon, 12 Mar 2012 13:35:28 +0000 小朱 http://www.jqueryajax.com/?p=1791 Read more »]]> javascript 模拟滚动条

最近工作上用到的,喜欢的可以收藏一下.

javascript代码如下:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

var $ = function (id) { return document.getElementById(id);}
var mainH = $('main').offsetHeight;
var boxH = $('box').offsetHeight;
 
if (mainH > boxH) {	
	$('scrollbar').style.height = Math.ceil(boxH/mainH * boxH)+ 'px';
	scrollBar();
}else {
	$('scrollbg').style.display = 'none';
}
 
 
function scrollBar()
{
    var oDiv=document.getElementById("scrollbar");
    var oPDiv=document.getElementById("scrollbg");
    var oTxt=document.getElementById("strong");
    var oDivp=document.getElementById("main");
    var startY=startoDivTop=0;
    oDiv.onmousedown=function (e)
    {
        var e=e||window.event;
        startY=e.clientY;
        startoDivTop=oDiv.offsetTop;
        if (oDiv.setCapture)
        {
            oDiv.onmousemove=doDarg;
            oDiv.onmouseup=stopDarg;
            oDiv.setCapture();
        }
        else
        {
            document.addEventListener("mousemove",doDarg,true);
            document.addEventListener("mouseup",stopDarg,true);
        }
        function doDarg(e)
        {
            var e=e||window.event;
            var t=e.clientY-startY+startoDivTop;
            if (t<0)
            {
                t=0;
            }
            else if (t>oPDiv.offsetHeight-oDiv.offsetHeight)
            {
                t=oPDiv.offsetHeight-oDiv.offsetHeight;
            }
          var s = t/(oPDiv.offsetHeight-oDiv.offsetHeight);
	  var m = Math.ceil(s*100);            
          oDiv.style.top=t+"px";           
 
	  var boxT = Math.ceil(oDivp.offsetHeight * s)/2;
          oDivp.style.top =-boxT+"px";   	
 
	  oTxt.innerHTML=Math.ceil(s*100)+"%"+boxT;
        }
        function stopDarg()
        {
            if (oDiv.releaseCapture)
            {
                oDiv.onmousemove=doDarg;
                oDiv.onmouseup=stopDarg;
                oDiv.releaseCapture();
            }
            else
            {
                document.removeEventListener("mousemove",doDarg,true);
                document.removeEventListener("mouseup",stopDarg,true);
            }
            oDiv.onmousemove=null;
            oDiv.onmouseup=null;
        }
    }
}

HTML代码如下:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<!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>TEST</title>
<style type="text/css">
body,strong,p{padding:0;margin:0;}
.content{width:960px; height:500px;margin:20px auto;border:1px #fff solid;padding:5px; overflow:hidden;}
.box{height:500px;width:800px;overflow:hidden;float:left;position:relative;}
.main{position:absolute;left:0;top:0px; height:auto; background-color:#066}
.scrollbg{float:right;width:50px;height:500px;background:#C9C9C9;position:relative;text-align:center;line-height:500px;}
.scrollbar{overflow:hidden;width:50px;height:100px;background:red;cursor:pointer;position:absolute;left:0;top:0;opacity:0.5;filter:alpha(opacity:50);}
</style>
</head>
<body>
<div class="content">
        <div class="box" id="box">
            <div class="main" id="main">
            	<div style=" background-color:#369; height:500px;">
                 <p>一篇很有见地的文章</p>
                <p>我很受伤，今天我终于拿到了签证，过完年我就带着老婆孩子移民离开这个国家了，有几句话，还是想说出来。我大学毕业就干了房地产，在一家业内TOP10的公司，一步步从售楼先生干到今天的地区副总，十年后，终于感觉到累了，也看透了，以前是不能说，今天终于可以说了。</p>
                <p>你们以为一定要财大气粗才能做开发商?你们错了，开发商大部分一开始都是空手套白狼，关系比资金重要的多，地才是一切的根本，只要跟政府关系够硬，拿到了地，那银行都巴巴的跑来，乖乖的给你贷款。</p>
                <p>你以为开发商都是自掏腰包?你们又错了，土地转让金都是贷款的，修楼盖房都是承建商垫资的，开发商没掏几个钱!</p>
                <p>你觉得盖好房子，开发商该卖房了吧，这次还是错了，开发商在开盘之前，会搞个内部认购，至少一半以上的房子都给内部认购掉，这个很多人知道了，其实就是找人向银行贷款买房，这哦其实就是自己卖给自己，但也是变相把楼盘以市价卖给银行，说白了就是产权变换一下，这银行的钱就全进到开发商的腰包了，真正想买房的老百姓，第一次几乎没有能买到心仪的房子，基本都是“卖掉了”，然后过两天告诉你说有人退房，其实这都是把内部认购的房子转移到老百姓手里，钞票再一次进入开发商的腰包。</p>
                <p>你觉得开发商拿到钱了，就该去还银行贷款了吧，这次还是错了，开发商怎么会那么傻，进了口袋的钱还掏出来?开发商会用这些款子再去拿地，只要拿到土地，随便哪个银行都乖乖的撅着屁股上门来。</p>
                <p>如果你们问银行就这么傻?我要告诉你，银行就是这么傻，开发商向银行贷款拿地，是用土地做抵押的，现在房子都盖好卖掉了，开发商就算还不了拿地的贷款，银行对这笔烂帐也没办法，只能去找政府，政府就把这块地再次出让，拆迁，补银行烂帐。所以你们没见吗，但凡成熟的开发商，都是拥有好几个相对独立的经济实体，钱就这么转来转去。心情好就还贷款给银行，心情不好就再说了。</p>
                <p>你们如果觉得政府是真心希望控制房价的，你们怎么老是错呢，真心觉得房价过高的，只是中央政府而已。但是中央政府手里没一寸土地，土地全是地方政府的。你们知道地方政府征地多少钱一亩吗?几万块而已，可卖给开发商多少钱吗?几百万一亩哦!对于地方政府来说，土地就是GDP，土地就是政绩，土地就是繁荣昌盛。你说地方政府会听中央的吗?</p>
                </div>
                <div style="height:1500px; background-color:#960">
                <p>中央的话地方可以不听，那中央也不是吃软饭的，于是新政策出台了，土地转让从以前的出让制度变成今天的竞拍制度。而且中央一挥手，央企老大哥们出马了，老大哥们挥舞着钞票出现在一个个土地竞拍会现场，大家惊呼，中央要控制土地了。</p>
                <p>你们觉得央企出马了，房价有望回落了。怎么每次都错呢!现在要拿地不光靠关系了，只能是竞拍，这样很多小开发商是不行了，但是土地就基本都集中到几个大开发商手里，变相土地兼并啊。央企老大哥是不差钱，但民企拿不到地，还不能抬抬价?竞拍的时候多举举牌子，那价格就是几千万几千万的往上窜。央企再牛，我让你拿地的价格跟市场房价靠拢，我让你控制房价，你控制啊!地价就这么高，你老大哥不拿，我民企拿，前面说过了，甭管什么价格，只要土地在手，不怕钞票没有!</p>
                <p>老大哥们拿了地，那怎么办，只能盖房子卖掉，卖什么价?不可能低于低价吧。再说老大哥的钱哪儿来的，国家给的。国家的钱哪儿来的，从老百姓手里收的。是的，事实就是这么残酷，国家从老百姓手里收钱买昂贵的土地盖成房子再以更贵的价格卖给老百姓。</p>
                <p>这就是房地产界的循环，政府，土地，银行，一次次的循环，生生不息，于是房价也就滚雪球一般。</p>
                <p>其实，真正想抑制房价，办法很简单，只要全民坚持两年不买房，不要多，只要两年，那样会倒掉一批开发商跟枪毙一批银行行长双规一批市长，代价是大了点，但是换来的是啥大家心里清楚。</p>
                <p>我干了10年房地产，真的看透了，天天跟肥头大耳的政府官员吃饭喝酒，跟肠肥脑满的行长唱歌跳舞，真的累了
                时间就从2011年1月1日开始至2012年12月31日结束</p>
                <p>全民号召两年不买房</p>
                <p>既然政府都不能控制房价</p>
                <p>就让我们自己团结起来抵制高房价吧</p>
                </div>
            </div>
    </div>
        <div id="scrollbg" class="scrollbg">
        <strong id="strong">0%</strong>
        <div id="scrollbar" class="scrollbar"></div>
    </div>
</div>
 
</body>
</html>
]]> http://www.jqueryajax.com/jquery/1791.html/feed 0 140字节的javascript写出的俄罗斯方块 http://www.jqueryajax.com/jquery/1785.html http://www.jqueryajax.com/jquery/1785.html#comments Tue, 21 Feb 2012 02:34:08 +0000 小朱 http://www.jqueryajax.com/?p=1785 Read more »]]> 140字节的javascript代码就能写出一个俄罗斯方块游戏，你信么？我反正信了。哈哈

1
2
3
4

<html>
<style>body{ font-family: monospace; font-size: 20px}</style>
<div id="output"></div>
</html>
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

 
<script>
var t =
function(a,b,c,d,e){return d+=c,e=a|b<<d,d<0|a&b<<d&&(a=e=parseInt((a|b<<c).toString(d=32).replace(/v/,""),d),b=new Date%2?1:3),[a,b,d,e]}
 
// Controller and Display
 
var out = document.getElementById("output");
 
var board = 0,
    block = 3,
    position = 32,
    display;
 
function update(offset){
 
  var txt = "",
    result = t(board,block,position, offset);
 
  board = result[0];
  block = result[1]
  position = result[2]
  display = result[3];
 
  display = ( 1<<30 | + display ).toString(2);
 
  for(var i=1; i<31;i++){
    txt += display[i] == "1" ? "#" : ".";
    if(i%5 == 0) txt+= "<br>";
  }
 
  out.innerHTML = txt;
}
 
update(0);
 
onkeydown = function(e){
 
  var offset = 0;
 
  switch (e.keyCode){
    case 37: offset = 1; break;
    case 39: offset = -1; break;
    case 40: offset = -5; break;
  }
 
  update(offset);
}
 
var speed = 1000;
 
function loop(){
  update(-5);
  setTimeout(loop, speed-=5);
}
 
loop();
 
</script>
]]> http://www.jqueryajax.com/jquery/1785.html/feed 2 可以调整区块大小，类似框架功能 http://www.jqueryajax.com/jquery/1779.html http://www.jqueryajax.com/jquery/1779.html#comments Wed, 08 Feb 2012 08:31:26 +0000 小朱 http://www.jqueryajax.com/?p=1779 Read more »]]> 可以调整区块大小，类似框架功能,很实用的例子。
先发个样式图，中间那个线是可以上下移动的。

 

完整代码如下：
Javascript:

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

function $(id) {
	return document.getElementById(id)	
}
window.onload = function() {
	var oBox = $("box"), oBottom = $("bottom"), oLine = $("line");
	oLine.onmousedown = function(e) {
		var disY = (e || event).clientY;
		oLine.top = oLine.offsetTop;
		document.onmousemove = function(e) {
			var iT = oLine.top + ((e || event).clientY - disY);
			var maxT = oBox.clientHeight - oLine.offsetHeight;
			oLine.style.margin = 0;
			iT < 0 && (iT = 0);
			iT > maxT && (iT = maxT);
			oLine.style.top = oBottom.style.top = iT + "px";
			return false
		};	
		document.onmouseup = function() {
			document.onmousemove = null;
			document.onmouseup = null;	
			oLine.releaseCapture && oLine.releaseCapture()
		};
		oLine.setCapture && oLine.setCapture();
		return false
	};
};

HTML：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<title>例子</title>
<style>
ul,li{margin:0;padding:0;}
body{font:14px/1.5 Arial;color:#666;}
#box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}
#box ul{list-style-position:inside;margin:10px;}
#box div{position:absolute;width:100%;}
#top,#bottom{color:#FFF;height:100%;overflow:hidden;}
#top{background:green;}
#bottom{background:blue;top:50%}
#line{top:50%;height:4px;overflow:hidden;margin-top:-2px;background:red;cursor:n-resize;}
</style>
 
</head>
<body>
<center>上下拖动红条改变显示区域高度</center>
<div id="box">
    <div id="top">
        <ul>
            <li>西安一大厦发生爆炸7人遇难31人受伤</li>
            <li>意大利经济学家蒙蒂出任过渡政府总理</li>
            <li>天宫神八今晚分离后再对接 全程需半小时</li>
            <li>吉林骗子承包厨子施工铁路桥墩将爆破拆除</li>
            <li>胡锦涛：人民币升值无法解决美国问题</li>
            <li>红会否认通过民政部门索捐 称按工龄捐款属谣言</li>
            <li>昆明警车拒绝救助临产孕妇 市民称警察当时在玩游戏</li>
            <li>网帖称贫困县人社局80名员工公款赴港澳旅游</li>
            <li>西安一大厦发生爆炸7人遇难31人受伤</li>
            <li>意大利经济学家蒙蒂出任过渡政府总理</li>
            <li>天宫神八今晚分离后再对接 全程需半小时</li>
            <li>吉林骗子承包厨子施工铁路桥墩将爆破拆除</li>
            <li>胡锦涛：人民币升值无法解决美国问题</li>
            <li>红会否认通过民政部门索捐 称按工龄捐款属谣言</li>
            <li>昆明警车拒绝救助临产孕妇 市民称警察当时在玩游戏</li>
            <li>网帖称贫困县人社局80名员工公款赴港澳旅游</li>
        </ul>
    </div>
    <div id="bottom">
        <ul>
            <li>京沪高铁因质量问题被召回动车拟16日恢复运营</li>
            <li>黑龙江穆棱河污染致数万人饮水难近10年</li>
            <li>湖南政府采购买高不买低 琴行老板揭招标内幕</li>
            <li>云南师宗矿难副矿长承认用煤灰抹脸假装逃生</li>
            <li>中介操控卵子黑市 北大清华女生卖卵可得数万元</li>
            <li>云南一村庄户籍"不存在" 村民身份不明四处碰壁</li>
            <li>河北燕郊数千人陷传销 称发展下线可获利百万</li>
            <li>国际原子能机构出示图片证明伊朗研发核武器</li>
            <li>京沪高铁因质量问题被召回动车拟16日恢复运营</li>
            <li>黑龙江穆棱河污染致数万人饮水难近10年</li>
            <li>湖南政府采购买高不买低 琴行老板揭招标内幕</li>
            <li>云南师宗矿难副矿长承认用煤灰抹脸假装逃生</li>
            <li>中介操控卵子黑市 北大清华女生卖卵可得数万元</li>
            <li>云南一村庄户籍"不存在" 村民身份不明四处碰壁</li>
            <li>河北燕郊数千人陷传销 称发展下线可获利百万</li>
            <li>国际原子能机构出示图片证明伊朗研发核武器</li>
        </ul>
    </div>
    <div id="line"></div>
</div>
</body>
</html>
]]> http://www.jqueryajax.com/jquery/1779.html/feed 1 JS判断中文为两个字符的方法 http://www.jqueryajax.com/jquery/1766.html http://www.jqueryajax.com/jquery/1766.html#comments Tue, 20 Dec 2011 09:51:02 +0000 小朱 http://www.jqueryajax.com/?p=1766 Read more »]]> 不解释，直接看代码吧。

1
2
3
4
5
6
7
8
9
10
11
12
13

function checkLen(str) {
  var len = 0 ;
  if (str.length > 0) {
	  for (i = 0 ; i < str.length  ; i ++) {
		if(str.charCodeAt(i) > 128) {
		  len += 2 ;
		} else {
		  len += 1 ;
		}
	  }
  }
  return len ;
}
]]> http://www.jqueryajax.com/jquery/1766.html/feed 0 最快的ＩＥ浏览器判断语句 http://www.jqueryajax.com/jquery/1750.html http://www.jqueryajax.com/jquery/1750.html#comments Wed, 16 Nov 2011 06:28:19 +0000 小朱 http://www.jqueryajax.com/?p=1750 浏览器兼容一直让人头痛。处理兼容问题经常要判断用户浏览器类型。
以前要写一大窜代码来判断是否为ＩＥ浏览器。以后再也不用这么麻烦了。

第一种方法：通过IE与非IE浏览器对垂直制表符支持特性搞出的一段简短的条件：

var ie = !+”\v1″;

第二种方法：利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器，如果数组里面最后一个字符为逗号，JS 引擎会自动剔除它。
var ie = !-[1,];

 

 

大家可以测试一下：

var ie = !-[1,];

alert(ie);

]]> http://www.jqueryajax.com/jquery/1750.html/feed 0 纯CSS TAB框架 http://www.jqueryajax.com/jquery/1747.html http://www.jqueryajax.com/jquery/1747.html#comments Tue, 15 Nov 2011 14:18:45 +0000 小朱 http://www.jqueryajax.com/?p=1747 Read more »]]> 实质就是一个切换卡，关键是如何让鼠标从按钮移到面板上时，面板不会消失。用到div:hover与CSS3圆角。


HTML部分

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<div class="main_console">  
 
           <div class="main_column">  
 
               <div class="column_title">AAAAA</div>  
 
               <div class="main_panel_wraper">  
 
                   <div class="main_panel">AAAA的面板</div>  
 
               </div>  
 
           </div>  
 
           <div class="main_column">  
 
               <div class="column_title">BBBB</div>  
 
               <div class="main_panel_wraper">  
 
                   <div class="main_panel">BBBB的面板</div>  
 
               </div>  
 
           </div>  
 
           <div class="main_column">  
 
               <div class="column_title">CCCC</div>  
 
               <div class="main_panel_wraper">  
 
                   <div class="main_panel">CCCC的面板</div>  
 
               </div>  
 
           </div>  
 
           <div class="main_column">  
 
               <div class="column_title">DDDD</div>  
 
               <div class="main_panel_wraper">  
 
                   <div class="main_panel">DDDD的面板</div>  
 
               </div>  
 
           </div>  
 
           <div class="main_client"></div>  
 
       </div>

CSS部分

.main_console{  
 
    border-top:30px solid #c2e1f8;  
 
    padding: 40px;  
 
    height:500px;  
 
    background: #c2e1f8;  
 
    border-radius:10px;  
 
    position:relative;  
 
}  
 
.main_client {  
 
    position:absolute;  
 
    width:800px;  
 
    height:500px;  
 
    top:0;  
 
    left:150px;  
 
    z-index:1;  
 
    border-radius:10px;  
 
    background:#8ed2f3;  
 
}  
 
 
 
.column_title{  
 
    width:150px;  
 
    height:30px;  
 
    border-top:1px solid #fff;  
 
    border-left:1px solid #fff;  
 
    border-bottom:1px solid #3183a1;  
 
    line-height:30px;  
 
    text-align:center;  
 
    color:#3183a1;  
 
    font-size:12px;  
 
}  
 
 
 
.main_column:hover .column_title{  
 
    background:#8ed2f3;  
 
    color:#fff;  
 
}  
 
/*.main_panel_wraper的作用是用于防止它移到面板上时面板立即消失*/ 
 
.main_panel_wraper{  
 
    position:absolute;  
 
    left:148px;/*注意这里，一定要把它与main_column处于交集状态*/ 
 
    top:0;  
 
    z-index:2;  
 
    display:none;  
 
    width:800px;  
 
    height:500px;  
 
}  
 
.main_column:hover .main_panel_wraper{  
 
    display:block;  
 
}  
 
/*真正用于放置内容的地方*/ 
 
.main_panel{  
 
    width:780px;  
 
    height:480px;  
 
    border-radius:10px;  
 
    margin:10px;  
 
    background:#dff9fb;  
 
}

原文地址:http://www.cnblogs.com/rubylouvre/archive/2011/02/15/1955486.html

]]> http://www.jqueryajax.com/jquery/1747.html/feed 4 firefox 官方下载地址（最新版本9.0） http://www.jqueryajax.com/jquery/1744.html http://www.jqueryajax.com/jquery/1744.html#comments Fri, 11 Nov 2011 09:27:01 +0000 小朱 http://www.jqueryajax.com/?p=1744 共享一下firefox官方的开发服务器地址，所以firefox的版本都能下载。
如果有想尝新的朋友可以去下载最新的版本，一般都是beat版的。目前最新的9.0beat版已经放出来了。
ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/
firefox 最新版下载

firefox 下载地址

]]> http://www.jqueryajax.com/jquery/1744.html/feed 0