代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可展开和收起的代码</title>
<style type="text/css">
img{border:0;}
ul,li{padding:0;margin:0;}
.QQbox {z-index:99;right:0;width:128px;height:128px;position:absolute;}
.QQbox .press{right:0;width:36px;cursor:pointer;position:absolute;height:128px;}
.QQbox .Qlist{left:0;width:131px;position:absolute;height:128px;background:url(/uploads/allimg/1107/floatServiceBj.gif) no-repeat left center;}
.QQbox .Qlist ul{padding:43px 0 0 21px;}
.QQbox .Qlist li{height:26px;margin-bottom:11px;_margin-bottom:7px; list-style-type:none;}
</style>
<script type="text/javascript">
load = size = scroll = function ()
{
var oBox = ElementById("divQQbox");
var oLine = ElementById("divOnline");
var oMenu = ElementById("divMenu");
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
setTimeout(function ()
{
clearInterval(oBox.timer);
var iTop = parseInt((document.documentElement.clientHeight - oBox.offsetHeight)/2) + iScrollTop;
oBox.timer = setInterval(function ()
{
var iSpeed = (iTop - oBox.offsetTop) / 8;
iSpeed = iSpeed > 0 ? il(iSpeed) : Math.floor(iSpeed);
oBox.offsetTop == iTop ? clearInterval(oBox.timer) : (p = oBox.offsetTop + iSpeed + "px");
}, 30)
}, 100)
useover = function ()
{
this.style.width = 131 + "px";
oLine.style.display = "block";
oMenu.style.display = "none";
};
useout = function ()
{
this.style.width = '';
oLine.style.display = "none";
oMenu.style.display = "block";
};
};
</script>
</head>
<body >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="QQbox" id="divQQbox" >
<div class="Qlist" id="divOnline" >
<ul>
<li><a href="#"><img src="/uploads/allimg/1107/floatServiceWeb.gif" alt="网页方式"></a></li>
<li><a href="#"><img src="/uploads/allimg/1107/floatServiceQq.gif" alt="QQ方式"></a></li>
</ul>
</div>
<div id="divMenu"><img src="/uploads/allimg/1107/floatService.gif" class="press" alt=""></div>
</div>
</body>
悬浮窗口定位显示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="代码效果" />
<meta name="description" content="代码效果" />
<title>网页特效 跟随页面悬浮滚动的调查窗口</title>
<style type="text/css">
body{text-align:center;font-size:12px;color:#333;font-family:"宋体";background:#fff;margin:0 auto;padding:0;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;margin:0;padding:0;}
ul,ol,li{list-style:none;}
td{word-break:break-all;}
a{color:#003cc8;text-decoration:none;}
a:hover{text-decoration:none;}
.f_tahoma{font-family:Tahoma;}
em,i{font-style:normal;}
.asp_zzjs_net{overflow:hidden;position:fixed;left:0px;top:200px;z-index:2;}
网页float是什么意思.left_zzjs{background:red;width:20px;height:80px;text-align:center;line-height:20px;display:block;color:#fff;}
.content{background:#999;width:800px;height:2000px;margin:0 auto;}
* html,* html body/*修正IE6振动bug*/{background-image:url(about:blank);background-attachment:fixed;}
.
asp_zzjs_net{_position:absolute;_bottom:auto;_left:0;_top: expression(documentElement.scrollTop + 200 + "px");}
.page{width:0px; position:absolute;height:0px;left:0;top:0px;z-index:1;overflow:hidden;display:none;}
.page div{border:1px solid #000;overflow:hidden;width:398px;}
.page h1{height:40px;text-align:center;font-size:20px;color:#fff;background:red;line-height:40px;}
.page h1 a{float:right;color:#000;margin-top:-15px;}
.page p{padding:10px;line-height:22px;font-size:14px;text-align:left;background:#fff;height:400px;width:378px;}