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"> body,a{font-size:12px;color:#000000;} a{text-decoration:none;color:#000000;} ul{margin-left:5px;} li{list-style:none;} .www_wuming_ren{z-index:99;width:170px;left:3px;top:145px;position:absolute;} .www_wuming_ren .press{left:0;border:none;cursor:pointer;width:26px;height:136px;position:absolute;} .www_wuming_ren .Qlist{left:0;width:170px;background:url(/img/20240318_www_wuming_ren_25.gif) padding:5px;} .www_wuming_ren .Qlist .b{float:left;height:6px;width:170px;font-size:1px;} .www_wuming_ren .Qlist .infobox{text-align:center;background:#bdc5cb;background-image:url(/img/20240318_www_wuming_ren_26.gif);background-repeat:no-repeat;padding:5px;line-height:14px;color:#000;font-weight:700;} .www_wuming_ren .Qlist .t{background:url(/img/20240318_www_wuming_ren_27.gif);height:34px;} .www_wuming_ren .Qlist .b{background:url(/img/20240318_www_wuming_ren_28.gif);height:9px;overflow:hidden;} .www_wuming_ren .Qlist .con{background:url(/img/20240318_www_wuming_ren_25.gif);width:100%;padding:10px 0px 10px 0px;} .www_wuming_ren .Qlist .con h2{height:22px;font:bold 12px/22px "宋体";background:url(/img/20240318_www_wuming_ren_25.gif) repeat-y -163px 0;border:1px solid #3a708d;color:#fff;} .www_wuming_ren .Qlist .con ul li{padding:5px 5px 0px 15px;} </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="www_wuming_ren" id="divwww_wuming_ren"> <div class="Qlist" id="_wuming_ren" onmouseout="hideMsgBox(event);" style="display:none;"> <div class="t"></div> <div class="infobox">我们营业的时间<br>9:00-18:00</div> <div class="con"> <ul> <li><a href="http://wpa.qq.com/msgrd?V=1&Uin=123456&Site=QQ咨询&Menu=yes" target="_blank"><img src="http://wpa.qq.com/pa?p=1:123456:4" border="0" alt="QQ咨询">QQ咨询</a></li> <li><img src="/img/20240318_www_wuming_ren_29.gif" width="18" height="17" border="0" alt="MSN咨询"><a href="msnim:chat?contact=MSN帐号">MSN咨询</a></li> <li><a href="http://amos1.taobao.com/msg.ww?v=2&uid=旺旺号码&s=2" target="_blank"><img src="http://amos1.taobao.com/online.ww?v=2&uid=旺旺号码&s=2" width="16" height="16" border="0" alt="旺旺咨询">在线旺旺</a></li> <li>咨询电话:010-88888888</li> </ul> </div> <div class="b"></div> </div> <div id="wuming_ren" onmouseover="OnlineOver();"><img src="/img/20240318_www_wuming_ren_30.gif" class="press" alt="在线咨询"></div> </div> <script language="javascript" type="text/javascript"> //<![CDATA[ var tips; var theTop = 145/*这是默认高度,越大越往下*/; var old = theTop; function initFloatTips() { tips = document.getElementById("divwww_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 }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) else if (document.body) { pos = document.body.scrollTop; } 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(); function OnlineOver(){ document.getElementById("wuming_ren").style.display = "none"; document.getElementById("_wuming_ren").style.display = "block"; document.getElementById("divwww_wuming_ren").style.width = "145px"; } function OnlineOut(){ document.getElementById("wuming_ren").style.display = "block"; document.getElementById("_wuming_ren").style.display = "none"; } if(typeof(HTMLElement)!="undefined") //给firefox定义contains()方法,ie下不起作用 { HTMLElement.prototype.contains=function(obj) { while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素 if(obj==this) return true; obj=obj.parentNode; } return false; }; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function hideMsgBox(theEvent){ //theEvent用来传入事件,Firefox的方式 if (theEvent){ var browser=navigator.userAgent; //取得浏览器属性 if (browser.indexOf("Firefox")>0){ //如果是Firefox if (document.getElementById("_wuming_ren").contains(theEvent.relatedTarget)) { //如果是子元素 return; //结束函式 } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) if (browser.indexOf("MSIE")>0){ //如果是IE if (document.getElementById("_wuming_ren").contains(event.toElement)) { //如果是子元素 return; //结束函式 } } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) /*要执行的操作*/ document.getElementById("wuming_ren").style.display = "block"; document.getElementById("_wuming_ren").style.display = "none"; } </script> </body> </html>
本文来自武鸣人网站,转载请注明出处