JS+CSS实现出现在网页左侧可折叠在线客户代码
代码内容：
<!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>
<title>JS+CSS实现出现在网页左侧可折叠在线客户代码_网页代码站(www.webdm.cn)</title>
<style type=text/css>
body{margin:0px}
.main_head {
BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_2.png) no-repeat
}
* HTML .main_head {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20100921/img3-5_2.png",sizingMethod='crop'); BACKGROUND: none
transparent scroll repeat 0% 0%
}
* + HTML .main_head {
BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_2.png) no-repeat
}
.info {
PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_3.png) repeat-y; PADDING-TOP: 5px
}
* HTML .info {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20100921/img3-5_3.png",sizingMethod='crop'); BACKGROUND-REPEAT: repeat-y
}
* + HTML .info {
PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_3.png) repeat-y; PADDING-TOP: 5px
}
.down_kefu {
WIDTH: 157px; BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_4.png) no-repeat; HEIGHT: 8px
}
* HTML .down_kefu {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20100921/img3-5_4.png",sizingMethod='crop'); WIDTH: 157px; BACKGROUND-
REPEAT: repeat-y; HEIGHT: 8px
}
* + HTML .down_kefu {
WIDTH: 157px; BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_4.png) no-repeat; HEIGHT: 8px
}
.Obtn {
MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_1.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
* HTML .Obtn {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20100921/img3-5_1.png",sizingMethod='crop'); WIDTH: 32px; BACKGROUND:
none transparent scroll repeat 0% 0%; FLOAT: left; HEIGHT: 139px
}
* + HTML .Obtn {
MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(http://www.webdm.cn/images/20100921/img3-5_1.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
.qqtable SPAN {
PADDING-BOTTOM: 5px; LINE-HEIGHT: 20px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; COLOR: #ff6600; FONT-SIZE: 13px; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.qqtable A {
TEXT-DECORATION: none
}
.qqtable A:hover {
TEXT-DECORATION: none
}
.qun {
BORDER-BOTTOM: #ffd2bf 1px solid; BORDER-LEFT: #ffd2bf 1px solid; PADDING-BOTTOM: 5px; LINE-HEIGHT: 20px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; WIDTH:
100px; PADDING-RIGHT: 0px; FONT-SIZE: 12px; BORDER-TOP: #ffd2bf 1px solid; BORDER-RIGHT: #ffd2bf 1px solid; PADDING-TOP: 5px
}
.qun SPAN {
COLOR: #ff6600; FONT-SIZE: 13px; FONT-WEIGHT: bold
}
</style>
</head>
<body>
<table width="980" height="2500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
<tr>
<td align="center" valign="top">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
<p><p>功能：可折叠收缩，可随滚动条滚动。</p></p>
<p></p></td>
</tr>
</table>
<DIV id=webdm onmouseover=toBig() onmouseout=toSmall()>
<TABLE style="FLOAT: left" border=0 cellSpacing=0 cellPadding=0 width=157>
<TBODY>
<TR>
<TD class=main_head height=39 vAlign=top> </TD></TR>
<TR>
<TD class=info vAlign=top>
<TABLE class=qqtable border=0 cellSpacing=0 cellPadding=0 width=120
align=center>
<TBODY>
<TR>
<TD align=middle><a href="http://www.webdm.cn/" target="_blank"><IMG border=0
src="http://www.webdm.cn/images/20100921/
kefu_head.gif"></a> </TD>
</TR>
<TR>
<TD height=5></TD></TR>
<TR>
<TD height=30 align=middle><SPAN>QQ:187397645</SPAN></TD></TR>
<TR>
<TD height=30 align=middle><SPAN>QQ:187397645</SPAN></TD></TR>
<TR>
<TD height=5></TD></TR>
<TR>
<TD height=35 vAlign=top align=middle><A href="http://www.webdm.cn/" target="_blank"><IMG border=0 src="http://www.webdm.cn/images/20100921/
img3-5-btn1.gif" width=90 height=25></A></TD>
</TR>
<TR>
<TD height=38 vAlign=top align=middle><A href="http://www.webdm.cn/" target="_blank"><IMG border=0 src="http://www.webdm.cn/images/20100921/
img3-5-btn2.gif" width=90 height=25></A></TD>
</TR>
<TR>
<TD align=middle>
<DIV class=qun><FONT
color=#9b9b9b>会员交流群</FONT><BR><SPAN>82040548</SPAN></DIV></TD></TR>
<TR>
<TD align=middle>
<DIV class=qun><FONT
color=#9b9b9b>商家交流群</FONT><BR><SPAN>82040548</SPAN></DIV></TD></TR>
<TR>
<TD align=middle> </TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD class=down_kefu vAlign=top></TD></TR></TBODY></TABLE>
<DIV class=Obtn></DIV></DIV>
<SCRIPT language=javascript>
客服龙龙=function (id,_top,_left){
var me=id.charAt?document.getElementById(id):id, d1=document.body, d2=document.documentElement;
d1.style.height=d2.style.height='100%';me.style.top=_top?_top+'px':0;me.style.left=_left+"px";//[(_left>0?'left':'left')]=_left?Math.abs(_left)+'px':0;
me.style.position='absolute';
setInterval(function (){me.style.top=parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px';},10+parseInt
(Math.random()*20));
return arguments.callee;
};
window.onload=function (){
客服龙龙
('webdm', 100, -152)
}
</SCRIPT>
<SCRIPT language=javascript>
lastScrollY=0;
var InterTime = 1;
var maxWidth=-1;
var minWidth=-152;
var numInter = 8;
var BigInter ;
var SmallInter ;
var o = document.getElementById("webdm");
var i = parseInt(o.style.left);
function Big()
{
if(parseInt(o.style.left)<maxWidth)
{
i = parseInt(o.style.left);
i += numInter;
o.style.left=i+"px";
if(i==maxWidth)
clearInterval(BigInter);
}
}
function toBig()
{
clearInterval(SmallInter);
clearInterval(BigInter);
BigInter = setInterval(Big,InterTime);
}
function Small()
{
if(parseInt(o.style.left)>minWidth)
{
i = parseInt(o.style.left);
i -= numInter;
o.style.left=i+"px";
if(i==minWidth)
clearInterval(SmallInter);
}
}
function toSmall()
{
clearInterval(SmallInter);
clearInterval(BigInter);
SmallInter = setInterval(Small,InterTime);
}
</SCRIPT>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/9a4492d2-72f8-4f04-8d1b-2c6df0e0bd59.html
