左侧悬浮可折叠在线客服代码

2周前 (04-18 19:50)阅读27回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4014
  • 级别管理员
  • 主题802
  • 回复2
楼主

这是一款很实用的网页左侧悬浮折叠在线客服特效，当用户的鼠标经过时才弹出显示，移开后自动折叠，根据自己的需求来自定义。

<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>左侧悬浮可折叠在线客服代码_武鸣人</title>
<style type="text/css">
body{margin:0px}
.head_wuming_ren {
BACKGROUND: url(/img/20240418_www_wuming_ren_39.png) no-repeat
}
* HTML .head_wuming_ren {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240418_www_wuming_ren_39.png",sizingMethod='crop'); BACKGROUND: none transparent scroll repeat 0% 0%
}
* + HTML .head_wuming_ren {
BACKGROUND: url(/img/20240418_www_wuming_ren_39.png) no-repeat
}
.info {
PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/img/20240418_www_wuming_ren_40.png) repeat-y; PADDING-TOP: 5px
}
* HTML .info {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240418_www_wuming_ren_40.png",sizingMethod='crop'); BACKGROUND-REPEAT: repeat-y
}
* + HTML .info {
PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/img/20240418_www_wuming_ren_40.png) repeat-y; PADDING-TOP: 5px
}
.kefu_www_wuming_ren {
WIDTH: 157px; BACKGROUND: url(/img/20240418_www_wuming_ren_41.png) no-repeat; HEIGHT: 8px
}
* HTML .kefu_www_wuming_ren {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240418_www_wuming_ren_41.png",sizingMethod='crop'); WIDTH: 157px; BACKGROUND-REPEAT: repeat-y; HEIGHT: 8px
}
* + HTML .kefu_www_wuming_ren {
WIDTH: 157px; BACKGROUND: url(/img/20240418_www_wuming_ren_41.png) no-repeat; HEIGHT: 8px
}
.btn_wuming_ren {
MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(/img/20240418_www_wuming_ren_42.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
* HTML .btn_wuming_ren {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240418_www_wuming_ren_42.png",sizingMethod='crop'); WIDTH: 32px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; HEIGHT: 139px
}
* + HTML .btn_wuming_ren {
MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(/img/20240418_www_wuming_ren_42.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
.qq_www_wuming__ren 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
}
.qq_www_wuming__ren A {
TEXT-DECORATION: none
}
.qq_www_wuming__ren 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>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<table width="980" height="2500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
  <tr>
    <td align="center" valign="top">
  <p>武鸣人，各种信息免费发布，资源共享合作共赢！</p>
</td>
  </tr>
</table>
<DIV id="www_wuming_ren" onmouseover=big_wwwwumingren() onmouseout=small_wwwwumingren()>
<TABLE style="FLOAT: left" border=0 cellSpacing=0 cellPadding=0 width=157>
  <TBODY>
  <TR>
    <TD class=head_wuming_ren height=39 vAlign=top>&nbsp;</TD></TR>
  <TR>
    <TD class=info vAlign=top>
      <TABLE class=qq_www_wuming__ren border=0 cellSpacing=0 cellPadding=0 width=120 
      align=center>
        <TBODY>
        <TR>
          <TD align=middle><a href="https://www.wuming.ren/" target="_blank"><IMG border=0 src="/img/20240418_www_wuming_ren_43.gif"></a> </TD>
        </TR>
        <TR>
          <TD height=5></TD></TR>
        <TR>
          <TD height=30 align=middle><SPAN>QQ:105673632</SPAN></TD></TR>
        <TR>
          <TD height=30 align=middle><SPAN>QQ:820778544</SPAN></TD></TR>
        <TR>
          <TD height=5></TD></TR>
        <TR>
          <TD height=35 vAlign=top align=middle><A href="https://www.wuming.ren/" target="_blank"><IMG border=0 src="/img/20240418_www_wuming_ren_44.gif" width=90 height=25></A></TD>
        </TR>
        <TR>
          <TD height=38 vAlign=top align=middle><A href="https://www.wuming.ren/" target="_blank"><IMG border=0 src="/img/20240418_www_wuming_ren_45.gif" width=90 height=25></A></TD>
        </TR>
        <TR>
          <TD align=middle>
            <DIV class=qun><FONT color=#9b9b9b>管理员QQ号码</FONT><BR><SPAN>305686263</SPAN></DIV></TD></TR>
        <TR>
          <TD align=middle>
            <DIV class=qun><FONT color=#9b9b9b>管理员QQ号码</FONT><BR><SPAN>305686263</SPAN></DIV></TD></TR>
        <TR>
          <TD align=middle>&nbsp;</TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD class=kefu_www_wuming_ren vAlign=top></TD></TR></TBODY></TABLE>
<DIV class=btn_wuming_ren></DIV></DIV>
<SCRIPT language=javascript>
wwwwumingren=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 (){
wwwwumingren
('www_wuming_ren',100,-152)
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>
<SCRIPT language=javascript> 
lastScrollY=0; 
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var InterTime = 1;
var maxWidth=-1;
var minWidth=-152;
var numInter = 8;
var BigInter ;
var SmallInter ;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var o =  document.getElementById("www_wuming_ren");
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 big_wwwwumingren()
{
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 small_wwwwumingren()
{
clearInterval(SmallInter);
clearInterval(BigInter);
SmallInter = setInterval(Small,InterTime);
}
</SCRIPT>
</body>
</html>


赞0
踩0
☆收藏0
左侧悬浮折叠在线客服
回帖

左侧悬浮可折叠在线客服代码 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息