悬浮在网页右侧固定位置QQ客服代码

9个月前 (03-06 20:54)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

在网页右侧QQ客服跟随页面悬浮滚动显示，只用用户的鼠标放上去后才弹出，鼠标移开后恢复隐藏效果。

<!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>悬浮在网页右侧固定位置QQ客服代码_武鸣人</title>
<style type="text/css">
ul,li,img{
margin:0;
padding:0;
border:0;
list-style:none;
}
.box_www_wuming_ren a{
text-decoration:none;
color:#333;
}
.box_www_wuming_ren a:hover{
text-decoration:underline;
color:#f30;
}
.box_www_wuming_ren{
width:168px;
height:auto;
overflow:hidden;
position:absolute;
right:0;
top:120px;
color:#333;
font-size:12px;
letter-spacing:0px;
z-index:101;
}
.qqlv{
width:20px;
height:197px;
overflow:hidden;
position:relative;
float:right;
z-index:50;
}
.close{
width:20px;
height:17px;
overflow:hidden;
}
.qqlv2{
width:20px;
height:181px;
overflow:hidden;
}
.qqkf{
width:168px;
height:auto;
overflow:hidden;
right:0;
top:0;
z-index:99;
}
.qqtop{
width:168px;
height:49px;
}
.qqcenter{
width:168px;
height:auto;
overflow:hidden;
background:url(/img/20240306_www_wuming_ren_55.jpg) repeat-y left top;
}
.qqcenter_box{
width:160px;
height:auto;
overflow:hidden;
}
.qq1{
text-align:left;
text-indent:10px;
font-weight:bold;
}
.qq_line{
width:150px;
height:1px;
margin-top:2px;
margin-bottom:6px;
overflow:hidden;
background:url(/img/20240306_www_wuming_ren_56.jpg) no-repeat;
}
.qq1_box{
width:150px;
height:auto;
text-align:left;
overflow:hidden;
}
.qq1_box ul li{
text-align:left;
text-indent:13px;
margin-bottom:3px;
}
.qq1_box ul .tm{
margin-left:10px;
}
.qq2{
text-align:left;
text-indent:10px;
font-weight:bold;
margin-top:6px;
}
.qq2 span{
font-weight:normal;
}
.qq2_box ul li{
text-align:left;
text-indent:8px;
margin-bottom:3px;
}
.qqend{
width:168px;
height:81px;
}
</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>
<div style="height:2000px;"></div>
<div class="box_www_wuming_ren" id="QQbox_wuming_ren">
  <div class="qqlv" id="meumid" onMouseOver="show()"><img src="/img/20240306_www_wuming_ren_60.gif"></div>
  <div class="qqkf" style="display:none;" id="contentid" onMouseOut="hideMsgBox(event)">
    <div class="qqtop"><img src="/img/20240306_www_wuming_ren_57.jpg"></div>
    <div class="qqcenter">
      <div class="qqcenter_box">
        <div class="qq1"><img src="/img/20240306_www_wuming_ren_58.jpg" align="absmiddle"> 在线咨询</div>
        <div class="qq_line"></div>
        <div class="qq1_box">
          <ul>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="点击我发送消息"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="渠道加盟"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
            <li><a target="_blank" href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes" title="备案咨询"><img src="http://wpa.qq.com/pa?p=1:305686263:4"></a> <a href="tencent://message/?uin=305686263&Site=www.wuming.ren&Menu=yes">客服咨询</a></li>
          </ul>
        </div>
        <div class="qq2"><img src="/img/20240306_www_wuming_ren_58.jpg" align="absmiddle"> 售后支持</div>
        <div class="qq_line"></div>
        <div class="qq2_box">
          <ul>
            <li>业务电话：000-000000</li>
            <li style="margin-left:60px;">000-000000</li>
            <li>夜间值班：000-000000</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="qqend"><img src="/img/20240306_www_wuming_ren_59.jpg"></div>
  </div>
</div>
<script language="javascript">
var tips; 
var theTop = 120;
var old = theTop;
function initFloatTips() 
{ 
tips = document.getElementById('QQbox_wuming_ren');
moveTips();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function moveTips()
{
var tt=50; 
if (window.innerHeight) 
{
pos = window.pageYOffset  
}else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop  
}else if (document.body) {
pos = document.body.scrollTop;  
}
//http:
pos=pos-tips.offsetTop+theTop; 
pos=tips.offsetTop+pos/10; 
if (pos < theTop){
pos = theTop;
}
if (pos != old) { 
tips.style.top = pos+"px";
tt=10;//alert(tips.style.top);  
}
old = pos;
setTimeout(moveTips,tt);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
initFloatTips();
if(typeof(HTMLElement)!="undefined")//给firefox定义contains()方法，ie下不起作用
{  
HTMLElement.prototype.contains=function (obj)  
{  
while(obj!=null&&typeof(obj.tagName)!="undefind"){//
if(obj==this) return true;  
obj=obj.parentNode;
}  
return false;  
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function show()
{
document.getElementById("meumid").style.display="none"
document.getElementById("contentid").style.display="block"
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function hideMsgBox(theEvent){
if (theEvent){
var browser=navigator.userAgent;
if (browser.indexOf("Firefox")>0){//Firefox
if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {
return
}
}
if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){
if (document.getElementById('contentid').contains(event.toElement)) {
return;//结束函式
}
}
}
document.getElementById("meumid").style.display = "block";
document.getElementById("contentid").style.display = "none";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/218.html

悬浮右侧定位QQ客服在线客服
回帖

悬浮在网页右侧固定位置QQ客服代码 期待您的回复！

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

取消确定

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