如何模仿QQ空间花栏效果

把它的代码扣出来。http://imgcache.qq.com/ac/qzone/G4.1.js300多K，里面应该有关于花腾的代码

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<DIV id="flowerContainer" style="WIDTH: 100%; BOTTOM: -30px; POSITION: absolute">
 <DIV class="flowerVine.bak" id="flowerVine" style="FILTER: alpha(opacity=100); moz-opacity: 1"><IMG id="flowerImg" style="LEFT: 0px; CURSOR: pointer; BOTTOM: 32px; POSITION: absolute" onClick="switchFlower(1)" alt="点击可隐藏花藤" src="http://imgcache.qq.com/qzone/space_item/orig/10/19098_r5.gif" /></DIV>
 <IMG class="flowerLeft2.bak" id="flowerPot" style="LEFT: 763px; CURSOR: pointer; BOTTOM: 29px; POSITION: absolute" onClick="switchFlower(2)" src="http://imgcache.qq.com/qzone/space_item/orig/10/19098_f5.gif" /></DIV>
这是它的花腾的代码，然后我估计它的正文内容除了花腾全放在一个DIV里，DIV的大小是整个网页的大小，DIV的overflow是auto,如果有滚动，不是网页的滚动，而是在DIV里滚动，所以花腾始终是固定在网页的底部，因为网页没有滚动。刚刚本地测试过，这个方法可以达到。
楼主要分析的话下个ie developer toolbar 分析就知道了
#body{
background-color: #eeeeee;
height: 100%;
width: 100%;
border: 1px solid #999999;
overflow: auto;
}
body{margin:0px;
overflow-y :hidden;
overflow-x :hidden;}
</style>
<div id="body">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 asdfasdf
</div>
<DIV id="flowerContainer" style="WIDTH: 100%; BOTTOM: -30px; POSITION: absolute">
 <DIV class="flowerVine.bak" id="flowerVine" style="FILTER: alpha(opacity=100); moz-opacity: 1"><IMG id="flowerImg" style="LEFT: 0px; CURSOR: pointer; BOTTOM: 32px; POSITION: absolute" onClick="switchFlower(1)" alt="点击可隐藏花藤" src="http://imgcache.qq.com/qzone/space_item/orig/10/19098_r5.gif" /></DIV>
 <IMG class="flowerLeft2.bak" id="flowerPot" style="LEFT: 763px; CURSOR: pointer; BOTTOM: 29px; POSITION: absolute" onClick="switchFlower(2)" src="http://imgcache.qq.com/qzone/space_item/orig/10/19098_f5.gif" /></DIV>自己看看
给你个浮动代码
http://wood-son.com/temp/code/f.rar
设置div的位置为fixed就好了,随便你真么动,就在一个位置给个JK的示例给你看<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title><style>#glideDiv0
{
position: fixed; /*for firefox*/
top: 200;
right:20;
z-index:200;
width:28px;
background-color:#E6EEE7;
}
/*for ie*/
* html #glideDiv0 {position:absolute}
* html body {
overflow: hidden;
padding :0;
margin:0;
}
* html div#wrap_outer {
width: 100%;
height: 100%;
overflow: auto;
padding: 0px 30px 30px 30px;
 }</style>
</head><body>
<div id="wrap_outer"><div style="font-size:10pt;">
注1：固定Div,且scroll时Div不闪动。 
注2：部分代码来自：http://www.javalobby.org/forums/thread.jspa?threadID=16484&tstart=0 
注3：（注：这里有<a href="DivFixedInBody1.htm">scroll时Div闪动</a>的代码） 
注：本页面仅在IE6下测试过。其它浏览器或其它版本未经测试。 
注-----：JK：<a href="mailTo:[email protected]?subject=About Body">[email protected]</a> 
<hr/>
</div>
 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
 aaaa
</div>
<div id="glideDiv0" >
a 
b 
c 
d 
e 
f 
g 
 
</div>
</body></html>