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
原文地址:https://www.cnblogs.com/webdm/p/2095258.html